Obrazy często stanowią większość pobranych bajtów ze strony internetowej i często zajmują znaczną ilość miejsca na stronie wizualnej. W efekcie optymalizacja obrazów często pozwala uzyskać największe oszczędności w postaci bajtów i zwiększa wydajność witryny: im mniej bajtów musi pobrać przeglądarka, tym mniejsza konkurencja o przepustowość łącza klienta i tym szybciej przeglądarka będzie mogła pobierać i renderować przydatne treści na ekranie.
Optymalizacja obrazów to zarówno sztuka, jak i nauka: sztuka, ponieważ nie ma jednej jednoznacznej odpowiedzi na to, jak najlepiej skompresować pojedynczy obraz, a także nauka, ponieważ istnieje wiele dobrze opracowanych technik i algorytmów, które pozwalają znacznie zmniejszyć rozmiar obrazu. Określenie optymalnych ustawień obrazu wymaga dokładnej analizy wielu aspektów: możliwości formatu, treści zakodowanych danych, jakości, wymiarów w pikselach i innych.
Optymalizacja obrazów wektorowych
Wszystkie nowoczesne przeglądarki obsługują Scalable Vector Graphics (SVG), czyli oparty na języku XML format obrazów dwuwymiarowych. Znaczniki SVG możesz umieścić bezpośrednio na stronie lub jako zasób zewnętrzny. Większość oprogramowania do rysowania wektorowego obsługuje pliki SVG lub możesz je napisać ręcznie bezpośrednio w ulubionym edytorze tekstu.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>
W powyższym przykładzie wyrenderowano prosty okrąg z czarnym konturem i czerwonym tłem. Obraz został wyeksportowany z programu Adobe Illustrator.
<?xml version="1.0" encoding="utf-8"?>
Zawiera on wiele metadanych, takich jak informacje o warstwie, komentarze i przestrzenie nazw XML, które często nie są potrzebne do renderowania zasobu w przeglądarce. Warto więc zmniejszyć pliki SVG za pomocą takiego narzędzia jak SVGO.
Na przykład SVGO zmniejsza rozmiar powyższego pliku SVG wygenerowanego przez Illustratora o 58%, zwiększając go z 470 do 199 bajtów.
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
Ponieważ SVG opiera się na formacie XML, możesz też zastosować kompresję GZIP, aby zmniejszyć rozmiar transferu – upewnij się, że Twój serwer jest skonfigurowany do kompresowania zasobów SVG.
Obraz rastrowy to po prostu dwuwymiarowa siatka pojedynczych „pikseli” – np. obraz o wymiarach 100 x 100 pikseli to sekwencja 10 000 pikseli. Z kolei każdy piksel przechowuje wartości „RGBA”: kanał czerwony (R), kanał zielony (G), kanał zielony, (B) kanał niebieski i (A) kanał alfa (przezroczystość).
Wewnętrznie przeglądarka przydziela do każdego kanału 256 wartości (cieni), co przekłada się na 8 bitów na kanał (2 ^ 8 = 256) i 4 bajty na piksel (4 kanały x 8 bitów = 32 bity = 4 bajty). W związku z tym, jeśli znamy wymiary siatki, możemy łatwo obliczyć rozmiar pliku:
- Obraz o wymiarach 100 x 100 pikseli składa się z 10 000 pikseli.
- 10 000 pikseli x 4 bajty = 40 000 bajtów
- 40 000 bajtów / 1024 = 39 KB
| Wymiary | Piksele | Rozmiar pliku |
|---|---|---|
| 100 x 100 | 10 000 | 39 KB |
| 200 x 200 | 40 000 | 156 KB |
| 300 x 300 pikseli | 90 000 | 351 KB |
| 500 x 500 | 250 000 | 977 KB |
| 800 x 800 | 640 000 | 2500 KB |
39 KB dla obrazu o wymiarach 100 x 100 pikseli może wydawać się niemało, ale w przypadku większych obrazów rozmiar pliku szybko rośnie, a ich pobieranie jest powolne i kosztowne. Do tej pory w poście skupialiśmy się wyłącznie na obrazie „nieskompresowanym”. Na szczęście rozmiar pliku obrazu można znacznie zmniejszyć.
Jedną z prostych strategii jest zmniejszenie „głębi bitowej” obrazu z 8 bitów na kanał do mniejszej palety kolorów: 8 bitów na kanał daje nam 256 wartości na kanał i 16 777 216 (256 ^ 3) kolorów łącznie. A jeśli zmniejszysz paletę do 256 kolorów? Potem wystarczyłoby łącznie 8 bitów dla kanałów RGB i od razu zaoszczędzić 2 bajty na piksel – to 50% oszczędności w porównaniu z oryginalnym formatem 4 bajtów na piksel.
Złożone sceny z stopniowymi przejściami kolorów (np. gradientami lub niebem) wymagają zastosowania większej palety kolorów, aby można było uniknąć wizualnych zakłóceń, takich jak rozpikselowane niebo w 5-bitowym zasobie. Z drugiej strony, jeśli zdjęcie używa tylko kilku kolorów, duża paleta to po prostu marnowanie cennych elementów.
Następnie, po zoptymalizowaniu danych przechowywanych w poszczególnych pikselach możesz zrobić to bardziej przemyślany i spojrzeć na pobliskie piksele: Na podstawie tych informacji kompresor może zastosować kodowanie delta, gdzie zamiast przechowywać osobne wartości dla każdego piksela, możesz zapisać różnicę między sąsiednimi pikselami: jeśli sąsiednie piksele są takie same, to delta wynosi „0” i wystarczy, że przechowujesz tylko jeden bit. Ale dlaczego na tym poprzestać...
Ludzkie oko ma różny poziom czułości na różne kolory: można zoptymalizować kodowanie kolorów, aby to uwzględnić, zmniejszając lub zwiększając paletę tych kolorów. Piksele „W pobliżu” tworzą dwuwymiarową siatkę. Oznacza to, że każdy piksel ma wielu sąsiadów: możesz to wykorzystać do dalszego ulepszania kodowania delta. Zamiast skupiać się tylko na najbliższych sąsiadach każdego piksela, możesz przyjrzeć się większym blokom sąsiednich pikseli i zakodować różne bloki z różnymi ustawieniami.
Optymalizacja obrazów szybko staje się skomplikowana (lub przyjemna w zależności od punktu widzenia) i stanowi aktywny obszar badań akademickich i komercyjnych. Obrazy zajmują dużo bajtów, a opracowanie lepszych technik kompresji obrazów na pewno przyniesie Ci wiele korzyści. Jeśli chcesz dowiedzieć się więcej, wejdź na stronę Wikipedii lub zapoznaj się z dokumentem na temat technik kompresji WebP.
Powtarzam, to świetna sprawa, ale i bardzo akademicki: jak pomaga w optymalizacji obrazów w witrynie? Ważne jest, aby zrozumieć sylwetkę problemu: piksele RGBA, głębię bitową i różne techniki optymalizacji. Wszystkie te koncepcje są kluczowe do zrozumienia i pominięcia przed przystąpieniem do dyskusji na temat różnych formatów obrazów rastrowych.
Bezstratna i stratna kompresja obrazu
W przypadku niektórych rodzajów danych, np. kodu źródłowego strony lub pliku wykonywalnego, kompresor nie może zmienić ani nie utracić żadnych oryginalnych informacji. Pojedynczy brakujący lub błędny fragment danych może całkowicie zmienić znaczenie zawartości pliku, a co gorsza nawet całkowicie go uszkodzić. W przypadku niektórych innych typów danych, takich jak obrazy, dźwięki i filmy, przedstawianie oryginalnych danych w „przybliżeniu” może być całkowicie dopuszczalne.
Działanie oka pozwala nam często rezygnować z pominięcia niektórych informacji o każdym pikselu w celu zmniejszenia rozmiaru pliku obrazu. Na przykład nasze oczy mają różną czułość na różne kolory, co oznacza, że do zakodowania niektórych kolorów możemy użyć mniejszej liczby bitów. W efekcie typowy proces optymalizacji obrazów składa się z 2 etapów wysokiego poziomu:
- Obraz jest przetwarzany przy użyciu filtra stratnego, który eliminuje część danych pikseli.
- Obraz jest przetwarzany przy użyciu filtra bezstratnego, który kompresuje dane pikseli.
Pierwszy krok jest opcjonalny, a dokładny algorytm zależy od konkretnego formatu obrazu, ale pamiętaj, że każdy obraz może zostać poddany kompresji stratnej w celu zmniejszenia jego rozmiaru. W rzeczywistości różnica między różnymi formatami zdjęć, takimi jak GIF, PNG, JPEG i inne, polega na połączeniu konkretnych algorytmów, które stosują (lub pomijają) przy stosowaniu kroków stratnych i bezstratnych.
Jaka jest „optymalna” konfiguracja optymalizacji stratnej i bezstratnej? Odpowiedź zależy od zawartości obrazu i Twoich własnych kryteriów, takich jak kompromis między rozmiarem pliku a artefaktami powodowanymi przez kompresję stratną. W niektórych przypadkach warto pominąć optymalizację stratną, aby przedstawić skomplikowane szczegóły w pełnej jakości obrazu. W innych przypadkach możesz zastosować agresywną optymalizację stratną, aby zmniejszyć rozmiar pliku komponentu z obrazem. Tutaj trzeba wziąć pod uwagę Twój osąd i kontekst – nie ma jednego uniwersalnego ustawienia.
Dobrym przykładem jest użycie formatu stratnego, takiego jak JPEG, kompresor zazwyczaj udostępnia dostosowywane ustawienie „jakości” (np. suwak jakości dostępny w ramach funkcji „Zapisz dla internetu” w programie Adobe Photoshop, który zwykle ma wartość z zakresu od 1 do 100, która kontroluje wewnętrzne działanie konkretnej kolekcji algorytmów stratnych i bezstratnych. Aby uzyskać najlepsze wyniki, eksperymentuj z różnymi ustawieniami jakości zdjęć i nie bój się obniżać – wyniki wizualne są często bardzo dobre, a oszczędność rozmiaru plików może być spora.
Wpływ kompresji obrazu na podstawowe wskaźniki internetowe
W związku z tym, że obrazy często nadają się do największego wyrenderowania treści, skrócenie czasu wczytywania zasobów obrazu może przełożyć się na lepszą wartość LCP zarówno w module, jak i w polu.
Jeśli korzystasz z ustawień kompresji w formatach obrazów rastrowych, poeksperymentuj z formatami WebP i AVIF, aby sprawdzić, czy możesz przesłać ten sam obraz na mniejszym rozmiarze niż w przypadku starszych formatów.
Pamiętaj jednak, by nie nadmiernie kompresować obrazów rastrowych. Dobrym rozwiązaniem jest skorzystanie z sieci CDN do optymalizacji obrazów, by znaleźć najlepsze ustawienia kompresji. Zamiast tego możesz też użyć narzędzi takich jak Butteraugli, aby oszacować różnice wizualne. Pozwoli to uniknąć zbyt agresywnego kodowania obrazów i nadmiernej utraty jakości.
Lista kontrolna optymalizacji obrazów
Oto kilka wskazówek i technik, o których warto pamiętać podczas optymalizacji obrazów:
- Preferuj formaty wektorowe: obrazy wektorowe są niezależne od rozdzielczości i skali, dzięki czemu idealnie sprawdzają się na wielu urządzeniach i w wysokiej rozdzielczości.
- Zmniejszaj i kompresuj zasoby SVG: znaczniki XML generowane przez większość aplikacji do rysowania zawierają często niepotrzebne metadane, które można usunąć. Upewnij się, że Twoje serwery są skonfigurowane tak, aby stosować kompresję GZIP zasobów SVG.
- Preferuj WebP lub AVIF zamiast starszych formatów rastrowych: pliki WebP i AVIF są zwykle znacznie mniejsze niż starsze formaty obrazów.
- Wybieraj najlepszy format obrazów rastrowych: ustal wymagania funkcjonalne i wybierz taki, który pasuje do poszczególnych zasobów.
- Eksperymentuj z optymalnymi ustawieniami jakości formatów rastrowych: nie bój się obniżyć ustawień jakości. Efekty są często bardzo dobre, a oszczędność bajtów – spora.
- Usuń zbędne metadane obrazów: wiele obrazów rastrowych zawiera zbędne metadane zasobu, np. informacje geograficzne czy informacje o aparacie. Użyj odpowiednich narzędzi, aby pozbyć się tych danych.
- Wyświetlaj skalowane obrazy: zmieniaj rozmiary obrazów i upewnij się, że wyświetlane obrazy są maksymalnie zbliżone do „naturalnych” wymiarów. Zwróć szczególną uwagę na duże obrazy, ponieważ to one są największym obciążeniem po zmianie rozmiaru.
- Automatyzacja, automatyzacja i automatyzacja: zainwestuj w zautomatyzowane narzędzia i infrastrukturę, które będą dbały o optymalizację wszystkich komponentów z obrazem.