Optymalizacja JPEG dla Internetu - Ultimate Guide

Kompresja obrazu występuje w każdym rodzimym formacie multimedialnym. Jednak różnica między GIF, PNG i JPEG jest w jaki sposób informacje są kompresowane i wyświetlane na ekranie. Istnieje wiele porad dotyczących tworzenia świetnych nośników graficznych publikowanych w Internecie, a jednak wielu projektantów nadal nie rozumie niektórych podstaw.

W tym przewodniku chciałbym podzielić się kilkoma pomysłami na właściwą kompresję JPEG. Chcesz zoptymalizować swoje zdjęcia, aby skrócić czas ładowania strony internetowej, a jednocześnie utrzymać przyzwoity poziom jakości. Chodzi o znalezienie równowagi między rozmiarami plików a obrazem na ekranie. Nie ma idealnego rozwiązania dla projektantów. Zajmuje to trochę początkowej praktyki, ale gdy zrozumiesz kompresję JPEG, staje się ona znacznie łatwiejsza w tworzeniu stron internetowych w przyszłości.

Unikaj zawsze oszczędzania na 100%

Prawie nigdy nie należy zapisywać obrazów JPEG w 100% jakości. To będzie nie produkować jak najwięcej “zoptymalizowany” obraz. W rzeczywistości oblicza się za pomocą formuły limitu optymalizacji, która znacznie zwiększa rozmiary plików. Nawet w porównaniu z jakością 90% lub 95% zauważysz znaczny spadek rozmiaru pliku.

W większości przypadków zaleca się zapisywanie obrazów o jakości znacznie niższej niż 90%. Jeśli otworzysz okno dialogowe Zapisz dla Internetu w Photoshopie, zauważysz, że oferują one wstępnie ustawione wartości, z których możesz wybierać. Dodałem możliwe wartości JPEG poniżej - zwróć uwagę na konwencje nazewnictwa.

• Niska - 10%
• Średni - 30%
• Wysoki - 60%
• Bardzo wysoko - 80%
• Maksymalny - 100%

Nawet w Adobe Photoshop 60% jakości obrazu jest uważane za „wysokie”. Wielu twórców stron internetowych ręczy za 50% - 70% to bezpieczny zakres, w którym można się trzymać.

Jak niski jest zbyt niski?

Wartości wybrane do optymalizacji są całkowicie zależne od danego projektu. Musisz zastanowić się, które typy grafiki będą wyświetlać najwyższe rozmiary plików - są to te, które naprawdę wymagają kompresji.

Twierdziłbym, że poniżej 30% naprawdę odcina się fundamentalną jakość obrazu. Inni projektanci przysięgają 50% jako “limit” do zmniejszenia optymalnej wartości. Ale najlepszą radą jest wypróbowanie różnych ustawień i zobaczenie, co wygląda najlepiej! Nie można pomylić się z kilkoma testami optymalizującymi obrazy JPEG w Internecie.

Opcje kompresji

Powinniśmy najpierw wyjaśnić dwa terminy „kompresja” i „jakość”, które są wzajemnie odwrotne. Oznacza to, że jeśli zapisujesz JPEG w 40% kompresji, uzyskasz 60% jakości (w porównaniu z maksymalną 100% jakością bez kompresji).

Są to najbardziej podstawowe opcje do wykorzystania - i powinny wystarczyć podczas zapisywania w Internecie. Ogólni użytkownicy nie dostają się do znacznie głębszych dostosowań. Podpróbkowanie staje się bardziej skomplikowane, gdy konwertujesz obrazy RGB na YCbCr (Luminancja, Chroma Blue, Chroma Red).

(Źródło zdjęcia: Kara Monroe)

The luminancja lub ustawienie jasności jest zawsze utrzymywane na najwyższym możliwym poziomie w kompresji JPEG. Przy tej wartości jasności na oddzielnym kanale łatwiej jest zoptymalizować poszczególne wartości koloru czerwonego i niebieskiego. Jest to również znane jako podpróbkowanie chroma. Projektanci zainteresowani zabrudzeniem rąk z chęcią przeczytają trochę więcej o tym algorytmie kompresji. Sprawdź ten wspaniały wpis na blogu o próbkowaniu chrominancji, który koncentruje się na obrazach JPEG.

(Źródło zdjęcia: Derek Hatfield)

Ciekawostką jest, że Adobe Photoshop nie zawsze wykorzystuje kompresję do próbkowania. Wszelkie obrazy zapisane za pomocą “Zapisz dla Internetu” dialog użyje tylko podpróbkowania chroma poniżej wartości jakości 50%.

Różne media internetowe

Sieć jest również pełna różnych rodzajów nośników obrazu. Możesz mieć zdjęcia, ikony, przyciski, odznaki i mnóstwo innych grafik. Ale warto zauważyć, że porównywanie jakości przycisku i fotografii po prostu nie ma sensu.

Podczas korzystania ze zdjęć lub szczegółowych obrazów należy rozważyć powiązanie z oddzielnym mniej skompresowanym plikiem JPEG. Następnie możesz ustawić miniatury na swojej stronie z wyższym współczynnikiem kompresji i znacznie mniejszymi rozmiarami plików. Jedynym minusem jest to, że musisz dostarczyć dwa zestawy obrazów do galerii multimediów. Zwróć uwagę na wiele różnych grafik, które uszyłeś na stronie internetowej i rozważ techniki optymalizacji dla każdego z osobna.

Planowanie modelu graficznego

Chcesz mieć zorganizowany system plików, który jest łatwy do przeszukiwania. Niektórzy webmasterzy będą udostępniać swoje zdjęcia w innym miejscu w Internecie - na przykład Flickr lub Picasa. Nadal jednak będziesz chciał użyć jakiegoś narzędzia do kompresji, aby zmniejszyć rozmiary obrazów, ale sposób ich wyświetlania w witrynie będzie się różnił. Dotyczy to zwłaszcza popularnego wzrostu liczby urządzeń mobilnych z dostępem do Internetu.

Znalazłem interesujący artykuł omawiający kodowanie JavaScript JPEG, które mogłoby się zdarzyć w twoim kodzie frontendowym. Galerie obrazów wysokiej jakości nie przynoszą większych korzyści, ale mogą skrócić czas ładowania dla użytkowników mobilnych. Byłaby to również przydatna technika podczas hotlinkowania obrazów lub dynamicznego przycinania miniatur.

Innym wymyślnym narzędziem do sprawdzenia jest Yahoo! Smush.it. Jest to aplikacja internetowa oparta na przeglądarce, w której możesz przesłać obraz, a Smush.it usunie wszystkie zbędne dodatkowe bajty, aby zoptymalizować rozmiar pliku. Jest w 100% bezstratny, co oznacza, że ​​jakość obrazu w ogóle nie pogorszy się. I jeszcze lepiej, możesz przesyłać wsadowo obrazy z bezpośrednich adresów URL, jeśli masz je hostowane na swojej stronie lub serwerze innej firmy.

Dodatkowe narzędzia

Istnieje wiele programów do wypróbowania w zakresie manipulacji obrazami. Istotne są wszelkie dodatkowe bajty, które można zgrać z każdego rozmiaru pliku. Nie ma tam zbyt wiele oprogramowania, ale dostępne opcje są niesamowite.

IrfanView

To bezpłatne oprogramowanie dla systemu Windows umożliwia przeglądanie i optymalizowanie dowolnego zestawu dużych obrazów. Szczególnie podoba mi się to oprogramowanie, ponieważ obsługuje konwersję wsadową z obrazów w wielu katalogach. Możesz automatycznie zastosować te same funkcje do setek obrazów JPEG.

Jeszcze lepsza jest obsługa wtyczek przez zewnętrznych programistów. Jednym z takich przykładów jest RIOT (Radical Image Optimization Tool). Ta wtyczka działa dla innych podobnych edytorów graficznych typu open-source, takich jak GIMP. Oferuje widok podwójnego obrazu, w którym można ręcznie dostosować parametry kompresji dla każdego obrazu.

Obsługa oprogramowania jest wspaniała, a funkcje RIOT są bardzo łatwe w użyciu. Oprócz kompresji obrazu masz również dostęp do usuwania dodatkowych metadanych, takich jak EXIF ​​i Adobe XMP. Te dodatkowe bity danych mogą tylko dodać się do twojego całkowitego rozmiaru plików i rzadko są potrzebne.

ImageOptim dla komputerów Mac

Jeśli korzystasz z OS X i potrzebujesz potężnej aplikacji do kompresji, nie szukaj dalej. ImageOptim to potężne narzędzie do kompresji obrazów w Internecie - czasami nawet lepiej niż Photoshop.

Cała aplikacja obsługuje funkcję „przeciągnij i upuść”, dzięki czemu łatwo jest zoptymalizować duże zestawy obrazów. W podobny sposób można uruchamiać polecenia bezpośrednio z poziomu terminala i konfigurować skrypty powłoki. Sprawdź stronę kodową Google, aby uzyskać więcej informacji i wsparcie techniczne.

Wystąpiły pewne drobne problemy z najnowszą stabilną wersją 1.3.3 w renderowaniu pikseli JPEG w Operze. Spróbuj sprawdzić wszystkie zoptymalizowane obrazy w 4 głównych przeglądarkach - Chrome, Safari, Firefox i Opera (i być może IE). Jeśli coś wygląda na przekrzywione, możesz spróbować pobrać ImageOptim 1.3.0, który konwertuje trochę czystsze.

Pomocne zasoby

• JPEG 101: Przewodnik po kursach awaryjnych w formacie JPEG
• Właściwe ustawienia kompresji, aby zapisać obrazy JPG dla WordPress
• Sprytne techniki optymalizacji JPEG
• Jak zoptymalizować obrazy JPEG na stronach internetowych
• Wszystko, co musisz wiedzieć o kompresji obrazu

Wniosek

Kompresja JPEG jest trudna, ponieważ trzeba znaleźć właściwą równowagę między jakością a substancją. Nawet gdy nasze nowoczesne prędkości połączenia internetowego rosną, nadal istnieje potrzeba zmniejszenia rozmiaru stron internetowych. Nowe frameworki, takie jak jQuery i Typekit, mogą używać setek dodatkowych kilobajtów, nawet w dobrze zoptymalizowanym projekcie.

Nadal muszę polecić Adobe Photoshop jako moje pierwsze oprogramowanie do edycji obrazów. Istnieją inne przykłady, które mogą być lepsze dla procesu optymalizacji JPEG. Ale projektanci stron internetowych mogą korzystać z nawet mniej znanych rozwiązań open source. Jeśli masz podobne sztuczki lub pomysły na kompresję JPEG, podziel się z nami w obszarze dyskusji poniżej.