Kompresja zdjęć — krótka definicja

Kompresja zdjęć to zmniejszenie wagi pliku graficznego przy zachowaniu możliwie dobrej jakości obrazu. Nie chodzi o zmianę tego, jak duże zdjęcie wygląda na ekranie, tylko o to, ile danych trzeba pobrać z serwera, żeby je wyświetlić.

Przykład prosty: masz zdjęcie 1024 × 768 px, które waży 1 MB. Po kompresji może dalej mieć 1024 × 768 px, ale ważyć 200 KB. Użytkownik widzi podobny obraz, ale jego przeglądarka pobiera znacznie mniej danych. Strona ładuje się szybciej, telefon mniej sapie, a użytkownik nie czeka, aż fotografia z łaski swojej pojawi się na ekranie.

Trzeba jednak pamiętać, że kompresja grafiki to tylko jeden element optymalizacji obrazów. Na SEO grafik wpływają też: rozmiar obrazu, format pliku, nazwa pliku, atrybut alt, kontekst tekstowy, sitemapa, lazy loading, struktura strony i to, czy obraz naprawdę coś wnosi.

Dlaczego kompresja ma znaczenie dla SEO

Grafiki potrafią zajmować ogromną część danych transferowanych ze strony. Czasem jedno nieskompresowane zdjęcie waży więcej niż tekst, CSS i część skryptów razem wzięte. Wtedy można mieć świetny artykuł, dobre linkowanie i sensowną strukturę, a strona i tak będzie sprawiała wrażenie ociężałej.

Ma to znaczenie zwłaszcza na telefonach. Użytkownik mobilny często korzysta ze słabszego połączenia, nie ma cierpliwości i nie będzie czekał, aż strona łaskawie zrzuci na niego zdjęcie w rozmiarze plakatu wyborczego. Jeśli obraz jest elementem LCP, czyli Largest Contentful Paint, jego waga i sposób ładowania mogą mocno wpływać na odczuwalną szybkość strony.

Core Web Vitals nie są religią, ale pokazują realny problem: strona ma być szybka, stabilna i wygodna. Ciężkie obrazy potrafią pogorszyć LCP, powodować przesunięcia layoutu i zwiększać czas oczekiwania. A to nie jest tylko techniczny detal. To wpływa na użytkownika, konwersję i widoczność w Google.

Dlatego optymalizacja zdjęć jest jednym z tych działań, które jednocześnie pomagają SEO i zwykłemu człowiekowi. Google dostaje lżejszą, sprawniejszą stronę. Użytkownik dostaje treść szybciej. Właściciel strony ma większą szansę, że ktoś nie ucieknie przed załadowaniem pierwszego obrazka.

Kompresja bezstratna

Kompresja bezstratna polega na zmniejszeniu wagi pliku bez usuwania informacji o obrazie. Po rozpakowaniu albo odczytaniu obraz powinien zachować tę samą jakość. W praktyce algorytm zapisuje dane sprytniej, usuwa nadmiarowe informacje techniczne albo porządkuje zapis tak, żeby plik ważył mniej.

To dobre rozwiązanie tam, gdzie jakość musi zostać zachowana bardzo dokładnie: przy grafikach technicznych, logotypach, ikonach, prostych ilustracjach, wykresach albo obrazach z przezroczystością. Często dotyczy to PNG, SVG albo bezstratnych wariantów WebP.

Bezstratna kompresja zwykle daje mniejsze oszczędności niż kompresja stratna, ale jest bezpieczniejsza jakościowo. Jeśli masz logo, screen z interfejsu, infografikę albo grafikę z tekstem, agresywna kompresja stratna może szybko zrobić z niej kaszę. A wtedy oszczędność danych będzie okupiona utratą czytelności.

Kompresja stratna

Kompresja stratna zmniejsza wagę pliku przez usunięcie części informacji z obrazu. Robi to w taki sposób, żeby straty były możliwie mało widoczne dla oka. Przy rozsądnym ustawieniu jakości różnica bywa niezauważalna. Przy przesadzie pojawiają się artefakty, rozmycia, dziwne plamy i efekt zdjęcia przepuszczonego przez tanią pralkę.

Najbardziej klasyczny przykład to JPEG. Świetnie nadaje się do zdjęć, fotografii produktów, krajobrazów, portretów i obrazów z dużą liczbą kolorów. Nie jest natomiast idealny do grafik z ostrymi krawędziami, tekstem i przezroczystością.

PNG lepiej sprawdza się przy grafikach płaskich, przezroczystościach, ikonach i elementach interfejsu, ale przy zdjęciach potrafi ważyć bardzo dużo. WebP potrafi obsłużyć zarówno kompresję stratną, jak i bezstratną, a często pozwala uzyskać mniejsze pliki niż JPEG i PNG. AVIF również potrafi dawać bardzo dobre wyniki, ale nie należy robić z niego świętego Graala dla każdego przypadku.

Nie ma jednego formatu idealnego zawsze i wszędzie. Zdjęcie produktu, logo, wykres, screen i ilustracja mogą wymagać różnych decyzji. Dobre SEO grafik zaczyna się od tego, żeby nie traktować wszystkich obrazów jak jednego worka plików do przepuszczenia przez automat.

Kolejność optymalizacji zdjęcia

Największy błąd polega na tym, że ludzie zaczynają od kompresji. Wrzucają ogromne zdjęcie do narzędzia, dostają lżejszy plik i uznają temat za zamknięty. Tylko że kompresja nie naprawi złego kadru, zbyt dużych wymiarów ani obrazu, który nie pasuje do miejsca na stronie.

Rozsądna kolejność wygląda tak:

1. Kadrowanie. Najpierw usuń to, czego nie trzeba pokazywać. Ściana, podłoga, przypadkowe tło, puste marginesy — to wszystko są dane, które ktoś musi pobrać.
2. Zmiana rozmiaru. Dopasuj grafikę do realnej szerokości, w jakiej będzie wyświetlana na stronie.
3. Kompresja. Dopiero teraz zmniejsz wagę pliku.
4. WebP / AVIF. Rozważ nowoczesny format, jeśli daje realną oszczędność i nie psuje jakości.
5. Alt. Opisz obraz tak, żeby był zrozumiały dla Google i dostępny dla użytkowników korzystających z czytników ekranu.
6. Nazwa pliku. Zamiast IMG_9281.jpg użyj nazwy opisowej, np. kompresja-zdjec-monet-przyklad.jpg.
7. Upload. Dopiero na końcu wgraj plik na stronę.

Ta kolejność jest ważna. Jeśli najpierw skompresujesz ogromne zdjęcie, a potem je przytniesz i zmniejszysz, część pracy wykonasz bez sensu. Jeśli wrzucisz obraz w pełnej rozdzielczości i tylko ustawisz mu mniejszą szerokość w CSS, przeglądarka nadal może pobierać wielki plik. Użytkownik nie widzi różnicy, ale transfer płacze.

Przykład optymalizacji krok po kroku

Najlepiej zasady pracy pokazywać na praktyce. Jestem poznaniakiem, więc do przykładu wybrałem najbardziej znany obraz w Poznaniu. „Plaża w Pourville” Moneta dzięki historii kradzieży dziesięciolecia zyskała sporą popularność. Nie będę tu robił kryminalnego offtopu, choć temat aż się prosi. Link do tej historii zostawiam na końcu artykułu.

Wracając do sedna: wybrałem się do Muzeum Narodowego i poprosiłem panią w kasie o instrukcję:

— Chciałbym sfotografować tego Moneta, co to go jakiś pędzlarz rąbnął kilka lat temu.

No i jest. Oryginał zrobiony lustrzanką. 5472 × 3648 px. Waga pliku: 3 137 536 B.

Wierzcie lub nie, ale zdarzało mi się, że ludzie mówiący o sobie biznesmeni i gazele biznesu wrzucali takie zdjęcia na swoje strony WWW. Nie widzieli nic złego w tym, że fotografia ładuje się dłużej niż ajfon. Nie przeszkadzało im, że kadr mógłby być lepszy. Ta awangarda nie przekłada się na User Experience. Co z tym można zrobić?

Krok pierwszy: kadrowanie

Kadrowanie to ujednolicenie formatu, proporcji albo po prostu obcięcie tego, co zbędne. Strona nie jest o ścianie muzeum, tabliczce przy obrazie ani przypadkowym tle. Skupiłem się więc na obrazie, tak aby poza ramą nie zostawało zbyt wiele.

Wiem, pogwałciłem tu złote proporcje i zapewne niejeden gust został zdeptany. Istotą zabiegu było kontrastowe pokazanie zmiany. A więc oto jest:

Cięcie było toporne, ale efekty już widać. Brak fragmentu ściany. Brak nieczytelnej tabliczki. Zostało to, co miało zostać.

Po kadrowaniu obraz ma wymiary 2516 × 2137 px i zajmuje 2 301 952 B.

Prostym zabiegiem usunąłem szpetne elementy grafiki, wydobyłem to, co istotne, i oszczędziłem 26% danych. To jeszcze nie wszystko.

Krok drugi: zmiana rozmiaru

Po kadrowaniu zdjęcie nadal ma 2516 px szerokości. A to wciąż za dużo. Jeśli maksymalna szerokość grafiki w treści strony wynosi około 940 px, nie ma sensu ładować obrazu ponad dwa razy szerszego. Użytkownik nie dostaje lepszego doświadczenia. Dostaje cięższy plik.

Po kolejnej obróbce obraz ma wymiary 920 × 781 px i zajmuje 425 984 B. Jest to 86% oszczędności danych, czyli 2 711 552 B mniej względem oryginału.

Uważny czytelnik może zauważyć, że szerokość zdjęcia jest o 20 px mniejsza niż szerokość kolumny tekstu. Tak: zdjęcie ma po 10 px marginesu po lewej i prawej stronie. Stąd różnica. Detal, ale właśnie o detalach jest ten tekst.

Krok trzeci: kompresja

Do tej pory obróbka była prosta i ewidentnie korzystna dla użytkownika. Usunąłem zbędne elementy, dopasowałem rozmiar do strony i zostawiłem sedno kadru. Teraz zaczyna się czarowanie, które nie zawsze udaje się z sukcesem.

Tu skupiam się na liczbach. Zdjęcie przy zachowaniu rozmiarów ma 81 920 B. To oznacza, że względem oryginału oszczędzam 97% danych. Zamiast jednego niezoptymalizowanego zdjęcia mogę zaproponować czytelnikowi 38 zoptymalizowanych grafik.

Pro tip: jeśli czujesz się na siłach i chcesz samodzielnie optymalizować grafiki, nie szczędź miejsca na dysku na kopie zapasowe. Zawsze pracuj na kopii, nie na jedynym oryginale.

Kompresję realizowałem przez TinyPNG. Narzędzi jest jednak dużo. Jedne lepiej sprawują się przy kompresji masowej, inne przy pojedynczych plikach. Jedne mocniej oszczędzają dane, często kosztem jakości grafiki, inne są mniej agresywne, ale obraz trzyma lepszą jakość.

[edit 2020 09 14]

Nie było lekko, ale zgodnie z obietnicą naskrobałem krótki artykuł o kompresji zdjęć na stronę WWW. Znajdziesz go >> tutaj <<.

Krok czwarty: WebP

Konwersja do formatu WebP to temat praktyczny, ale bywa kłopotliwy przy starszych stronach. Jeśli masz już setki istniejących grafik, trzeba sprawdzić, czy CMS, szablon, cache, CDN i kod strony poprawnie obsłużą nowy format. Przy nowych treściach jest łatwiej: od razu można przygotować obrazy w nowoczesnym formacie.

Spójrz na liczby: 36 864 B to waga finalnego pliku. W mojej opinii zdecydowanie warto pamiętać o WebP przy nowych treściach. Przy modernizacji starszych stron trzeba to robić ostrożnie, z kontrolą jakości i testami.

AVIF również może dawać bardzo dobre wyniki, szczególnie przy zdjęciach, ale nie zawsze będzie najlepszym wyborem. Czasem WebP jest bardziej praktyczny. Czasem JPEG po dobrej obróbce w zupełności wystarczy. Czasem PNG zostaje najlepszy dla prostych grafik z przezroczystością. Format dobiera się do obrazu, nie do mody.

Jakie narzędzia warto używać?

Nie ma jednego narzędzia, które zawsze wygrywa. Są narzędzia do szybkiej pracy, narzędzia do kontroli jakości i narzędzia do automatyzacji. Wybór zależy od tego, czy obrabiasz jedno zdjęcie do artykułu, paczkę grafik na bloga, czy kilka tysięcy zdjęć w sklepie internetowym.

• TinyPNG — wygodne narzędzie do szybkiej kompresji PNG, JPEG i WebP. Dobre do codziennej pracy na mniejszych paczkach.
• Squoosh — świetne do testowania różnych formatów i poziomów kompresji. Widać od razu, co dzieje się z jakością obrazu.
• ImageMagick — narzędzie dla osób, które chcą przetwarzać obrazy automatycznie, z poziomu skryptów i większych procesów.
• Photoshop — dobry, jeśli poza kompresją trzeba też kadrować, poprawiać kolor, przygotowywać eksport i kontrolować jakość.
• GIMP — darmowa alternatywa do ręcznej edycji grafik.
• Skrypty automatyczne — sensowne przy dużych serwisach, gdzie ręczna praca na każdym pliku byłaby stratą życia.

Nie robiłbym z tego rankingu. Narzędzie jest mniej ważne niż proces. Jeśli wrzucasz do najlepszego programu zdjęcie w złych wymiarach, z fatalnym kadrem i bez sensu na stronie, to program nie zrobi z tego dobrej optymalizacji. Tylko szybciej skompresuje problem.

Ile można zaoszczędzić?

Na przykładzie Moneta widać to bardzo dobrze:

• oryginał: 5472 × 3648 px, 3 137 536 B,
• po kadrowaniu: 2516 × 2137 px, 2 301 952 B,
• po zmianie rozmiaru: 920 × 781 px, 425 984 B,
• po kompresji: 81 920 B,
• po konwersji do WebP: 36 864 B.

Największa lekcja? Kompresja nie była pierwszym krokiem. Najpierw usunąłem zbędny fragment kadru. Potem dopasowałem rozmiar do strony. Dopiero później kompresowałem i konwertowałem.

Oszczędność 97% danych po kompresji robi wrażenie. Finalny plik WebP ważący 36 864 B pokazuje jeszcze mocniej, jak dużo można zyskać przy dobrze poprowadzonym procesie. Zamiast jednego niezoptymalizowanego zdjęcia można użytkownikowi dostarczyć kilkadziesiąt obrazów przygotowanych rozsądnie.

To nie znaczy, że zawsze uzyskasz dokładnie taki wynik. Każde zdjęcie jest inne. Inaczej kompresuje się fotografia obrazu, inaczej portret, inaczej screen interfejsu, inaczej wykres. Ale zasada zostaje: dobra kolejność pracy daje większy efekt niż ślepe przepuszczenie pliku przez kompresor.

Kompresja zdjęć a lazy loading, srcset i picture

Kompresja zdjęć zmniejsza wagę pliku, ale nie rozwiązuje wszystkich problemów. Jeśli na stronie masz dużo obrazów, trzeba też kontrolować sposób ich ładowania. Lazy loading pozwala opóźnić ładowanie grafik, które nie są od razu widoczne na ekranie. To może znacząco przyspieszyć start strony.

Trzeba jednak uważać. Obraz będący głównym elementem widocznym od razu po wejściu na stronę, czyli potencjalny element LCP, nie powinien być traktowany tak samo jak zdjęcie na samym dole artykułu. Najważniejsze grafiki muszą być szybko dostępne, a mniej istotne mogą ładować się później.

Atrybut srcset pozwala podać różne wersje obrazu dla różnych ekranów. Dzięki temu telefon nie musi pobierać pliku przygotowanego pod wielki monitor. Element picture pozwala z kolei serwować różne formaty, np. WebP albo AVIF, z fallbackiem dla przeglądarek i sytuacji, w których dany format nie jest najlepszy.

Nie musisz od razu budować kosmicznego systemu obrazów. Ale jeśli strona ma dużo grafik, sklep ma tysiące zdjęć produktów albo blog regularnie publikuje materiały wizualne, sama kompresja będzie tylko częścią większej układanki.

Ile kosztuje optymalizacja zdjęć?

Tak jak ze wszystkimi pracami w IT, koszt zależy od ilości czasu, narzędzi i klasy osoby realizującej zadanie. Narzędzia mogą być darmowe albo płatne. Sama praca może być szybka albo bardzo żmudna. Wszystko zależy od skali i stanu wyjściowego.

• Optymalizacja grafik przy nowych treściach jest względnie najszybsza. Przetwarzane są paczki plików przed zamieszczeniem na serwerze. Praca idzie regularnie wraz z rozwojem strony.
• Optymalizacja grafik konkretnego adresu URL bywa niewdzięczna. Najpierw trzeba pobrać konkretne obrazy, zrobić kopię, obrobić, sprawdzić jakość i ponownie je wgrać.
• Optymalizacja całego serwisu jest łatwiejsza procesowo, ale trudniejsza skalą. Sklep z 10 kategoriami, 10 podkategoriami, 10 produktami i 4 zdjęciami na produkt to minimum 4000 grafik do przetworzenia.

Przy dużych sklepach często dochodzą miniatury, różne rozmiary zdjęć, galerie, cache, CDN i automaty generujące warianty obrazów. Wtedy ręczna praca nie ma sensu. Potrzebne jest batch processing, czyli przetwarzanie paczek plików, najlepiej z kopią zapasową i kontrolą jakości.

Omawiając wynagrodzenie, zawsze wskazuję na jedno: każda praca musi być weryfikowana. Optymalizacja grafik to pobranie plików, utworzenie kopii zapasowej, przetwarzanie, kontrola jakości i wgranie nowych obrazów. To nie jest chirurgia mózgu, ale wymaga wiedzy, doświadczenia i oka. Na każdej grafice ktoś musi się zatrzymać i ocenić, czy oszczędność danych nie zabiła jakości.

Jak często wracać do grafik?

Sam do optymalizacji grafik wracam co 3–4 miesiące. Nie dlatego, że lubię przerzucać pliki dla sportu. Po prostu zmieniają się narzędzia, formaty, algorytmy kompresji, wymagania PageSpeed i sposób, w jaki strona jest rozwijana.

Najważniejsze jest jednak to, żeby nie dopuszczać do bałaganu. Jeśli przez rok każdy wrzucał grafiki po swojemu, bez nazw, bez rozmiarów, bez kompresji i bez kontroli jakości, później optymalizacja staje się sprzątaniem piwnicy po ekipie remontowej. Niby wiadomo, że trzeba, ale nikt nie chce zaczynać.

Przy nowych treściach najlepiej wdrożyć prostą procedurę: kadrowanie, resize, kompresja, format, nazwa pliku, alt, sprawdzenie na stronie. Przy starszych treściach warto robić cykliczny przegląd: największe pliki, najważniejsze podstrony, obrazy LCP, produkty w sklepie, artykuły z największym ruchem.

Zaniedbanie grafik potrafi ciągnąć stronę w dół po cichu. Niby wszystko działa, ale PageSpeed krzyczy, mobile zwalnia, użytkownicy uciekają, a właściciel zastanawia się, dlaczego kolejne teksty nie dają efektu.

Opowieść o obrazie Moneta „Plaża w Pourville”

Obiecałem opowieść o obrazie Moneta, „Plaży w Pourville” oraz niecodziennej kryminalnej miłości do sztuki. To nie jest sedno tego poradnika, więc nie będę rozciągał wątku na pół artykułu. Historia jest jednak zbyt poznańska i zbyt osobliwa, żeby ją całkiem pominąć.

Obraz został skradziony z Muzeum Narodowego w Poznaniu, a po latach odzyskany. Cała historia ma w sobie coś z kryminału, czegoś absurdalnego i czegoś bardzo lokalnego. Jeśli chcesz doczytać szczegóły, zajrzyj tutaj:

Historia odzyskania skradzionego obrazu Moneta

Wnioski

1. Największą oszczędność daje nie kompresja, ale właściwa kolejność pracy. Najpierw kadruj, potem zmieniaj rozmiar, dopiero później kompresuj i konwertuj. Inaczej optymalizujesz problem, zamiast go rozwiązać.

2. Dobrze przygotowane zdjęcie jest szybsze i wygodniejsze dla użytkownika. Lżejszy plik to krótsze ładowanie, lepszy odbiór strony i mniej nerwów na telefonie. To nie jest detal dla techników. To realne doświadczenie człowieka po drugiej stronie ekranu.

3. SEO zaczyna się dużo wcześniej niż przy publikacji strony. Nazwa pliku, format, wymiary, alt, kompresja i sposób ładowania obrazu powinny być przemyślane przed wrzuceniem grafiki do CMS-a. Po publikacji też można sprzątać, ale zwykle jest drożej i mniej przyjemnie.

FAQ

Czy kompresja pogarsza jakość zdjęcia?

Nie zawsze. Kompresja bezstratna zmniejsza wagę pliku bez zauważalnej utraty jakości, bo nie usuwa informacji o obrazie. Kompresja stratna usuwa część danych, ale przy rozsądnych ustawieniach różnica często jest trudna do zauważenia. Problem zaczyna się przy zbyt agresywnej kompresji, kiedy pojawiają się artefakty, rozmycia i brzydkie przejścia kolorów.

Czy WebP zawsze jest najlepszym wyborem?

Nie. WebP często daje bardzo dobre wyniki i warto go używać przy nowych treściach, ale nie jest automatycznie najlepszy dla każdej grafiki. Przy prostych grafikach z przezroczystością czasem lepszy będzie PNG albo SVG. Przy zdjęciach warto porównać WebP, AVIF i dobrze przygotowany JPEG. Liczy się efekt: waga, jakość, obsługa przez stronę i wygoda wdrożenia.

Jak zmniejszyć wagę zdjęcia bez utraty jakości?

Zacznij od kadrowania i zmiany rozmiaru. Bardzo często największa oszczędność pojawia się jeszcze przed właściwą kompresją. Usuń zbędne fragmenty kadru, dopasuj szerokość obrazu do miejsca na stronie, a dopiero później użyj narzędzia do kompresji. Przy grafikach wymagających wysokiej jakości wybieraj kompresję bezstratną albo bardzo delikatną kompresję stratną.

Czy optymalizacja grafik wpływa na SEO?

Tak. Optymalizacja grafik wpływa na szybkość strony, Core Web Vitals, LCP, UX i możliwość indeksowania obrazów przez Google. Lżejsze, dobrze opisane i poprawnie osadzone obrazy pomagają stronie działać sprawniej. Sama kompresja nie zastąpi treści, linków i techniki, ale zaniedbane grafiki potrafią skutecznie zablokować efekty SEO.