Strona ładuje się trzy sekundy. Statystyki mówią, że połowa użytkowników już jej nie zobaczy. W większości przypadków winowajcą są zdjęcia – zbyt duże, w złym formacie, bez żadnej optymalizacji. To jeden z najłatwiejszych do naprawienia problemów wydajnościowych, a efekty widać natychmiast.
Dlaczego optymalizacja zdjęć ma tak duże znaczenie?
Obrazy odpowiadają średnio za ponad 50% wagi strony internetowej. Jeden nieoptymalizowany baner może ważyć więcej niż cały pozostały kod HTML, CSS i JavaScript razem wzięty. Dla użytkownika na wolnym połączeniu lub telefonie komórkowym to różnica między stroną, która działa, a taką, którą po prostu zamknie.
Ale wolne ładowanie to nie jedyny problem. Google od 2021 roku używa wskaźników Core Web Vitals jako czynnika rankingowego. Largest Contentful Paint (LCP) – czas do załadowania największego elementu na stronie, którym najczęściej jest właśnie zdjęcie – bezpośrednio wpływa na pozycję w wynikach wyszukiwania. Słabo zoptymalizowane obrazy dosłownie obniżają widoczność strony w Google.
Dobra wiadomość jest taka, że optymalizacja zdjęć nie wymaga specjalistycznej wiedzy ani drogich narzędzi. Wymaga tylko znajomości kilku zasad, które od dziś możesz stosować przy każdym uploaderze zdjęcia na stronę.
Wybór formatu – WebP, AVIF, JPEG czy PNG?
Format pliku to pierwsza i najważniejsza decyzja przy przygotowaniu zdjęcia do internetu. Wybór złego formatu może sprawić, że plik będzie kilkakrotnie cięższy niż powinien.
JPEG to stary, sprawdzony standard dla fotografii i zdjęć z dużą ilością kolorów i gradientów. Kompresja stratna oznacza, że część danych jest tracona przy zapisie, ale przy jakości 70-85% różnica wizualna jest praktycznie niezauważalna, a plik jest znacznie lżejszy niż przy 100%.
PNG sprawdza się przy grafikach z przezroczystością, logotypach, ikonach i ilustracjach z wyraźnymi krawędziami i jednolitymi obszarami kolorów. Kompresja bezstratna oznacza pełną jakość, ale też większe pliki niż JPEG przy fotografiach. Najczęstszy błąd: zapisywanie zdjęć jako PNG, bo „tak wychodzi z aparatu”. To prosta droga do plików ważących 5-10 MB.
WebP to nowoczesny format stworzony przez Google, który oferuje lepszą kompresję niż zarówno JPEG, jak i PNG – przy porównywalnej lub wyższej jakości obrazu. Obsługuje zarówno kompresję stratną (jak JPEG), jak i bezstratną (jak PNG) oraz przezroczystość. Dziś WebP obsługują wszystkie główne przeglądarki i jest to domyślny wybór dla nowych projektów.
AVIF to jeszcze nowszy format, który osiąga jeszcze lepszą kompresję niż WebP – często o 30-50% mniejsze pliki przy tej samej jakości. Obsługa przeglądarek jest już dobra, choć nie tak powszechna jak WebP. Warto go stosować jako format docelowy z WebP jako fallbackiem.
Praktyczna zasada: fotografie i zdjęcia – WebP (lub AVIF). Grafiki z przezroczystością – WebP. Logotypy i ikony wektorowe – SVG, który jest formatem osobnej kategorii i skaluje się bez utraty jakości na każdym ekranie.
Wymiary i rozdzielczość – nie wrzucaj zdjęcia 4000×3000 px na bloga
Skalowanie zdjęcia przez przeglądarkę to jeden z najbardziej powszechnych i kosztownych błędów. Jeśli twój kontener ma 800 px szerokości, a wrzucasz zdjęcie 3840×2160 px, przeglądarka pobierze cały 4K obraz, a następnie zmniejszy go do wyświetlenia w 800 px. Użytkownik pobiera kilka megabajtów danych, które i tak nie zostaną mu pokazane.
Zasada jest prosta: przeskaluj zdjęcie do maksymalnych wymiarów, w których będzie wyświetlane – jeszcze przed uploadem. Zdjęcie w treści artykułu blogowego rzadko potrzebuje więcej niż 1200 px szerokości. Miniaturka w siatce – 400-600 px. Baner pełnoekranowy – 1920 px przy zachowaniu rozsądnej kompresji.
Nowoczesne strony obsługują też responsive images przez atrybut srcset, który pozwala podać przeglądarce kilka wersji tego samego zdjęcia w różnych rozmiarach. Przeglądarka sama wybiera odpowiednią wersję w zależności od rozdzielczości ekranu i rozmiarów okna:
<img
src="zdjecie-800.webp"
srcset="zdjecie-400.webp 400w, zdjecie-800.webp 800w, zdjecie-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
alt="Opis zdjęcia"
>Użytkownik na telefonie pobierze wersję 400 px, użytkownik na desktopie – 1200 px. Żadnych zbędnych danych.
Rozdzielczość to osobna kwestia. Ekrany Retina i HiDPI wyświetlają obrazy w podwójnej gęstości pikseli – zdjęcie 800 px na Retinie zajmuje fizycznie tyle miejsca co 400 px na zwykłym ekranie, ale żeby wyglądało ostro, musi mieć 800 px faktycznej rozdzielczości. Dlatego dla ekranów Retina warto serwować wersje 2x, najlepiej właśnie przez srcset.
Kompresja – jak dużo można ścisnąć bez utraty jakości?
Kompresja to sztuka znajdowania punktu równowagi między rozmiarem pliku a jakością wizualną. Dobra wiadomość: ludzkie oko jest zaskakująco wyrozumiałe, szczególnie przy fotografiach z dużą ilością szczegółów, gdzie artefakty kompresji trudniej zauważyć.
Dla JPEG i WebP w trybie stratnym punkt startowy to jakość 75-85%. W większości przypadków różnica między 85% a 100% jest niewidoczna gołym okiem, a plik jest dwa-trzy razy mniejszy. Warto samodzielnie przetestować kilka poziomów kompresji i ocenić wynik wizualnie.
Narzędzia do kompresji, które warto znać:
Squoosh (squoosh.app) to darmowa aplikacja webowa od Google z podglądem przed/po w czasie rzeczywistym. Idealna do ręcznej optymalizacji pojedynczych zdjęć – pokazuje dokładnie, jak zmiana ustawień wpływa na jakość i rozmiar pliku.
ImageOptim (macOS) i FileOptimizer (Windows) to aplikacje desktopowe do zbiorczej optymalizacji – przeciągasz folder ze zdjęciami, program optymalizuje wszystkie bez zmiany formatów.
Sharp to biblioteka Node.js do automatycznej optymalizacji obrazów w procesie buildowania. Jeśli używasz Vite, Next.js lub Nuxt, masz podobne mechanizmy wbudowane – warto sprawdzić, czy są włączone.
Cloudinary i Imgix to usługi CDN ze wbudowaną transformacją obrazów – możesz przez parametry URL dynamicznie zmieniać format, rozmiar i jakość zdjęcia bez przechowywania dziesiątek wersji.
Lazy loading i atrybuty, o których często się zapomina
Optymalizacja zdjęć to nie tylko rozmiar i format pliku. Sposób, w jaki przeglądarka je ładuje, ma równie duże znaczenie dla wydajności i SEO.
Lazy loading oznacza, że zdjęcia poza widocznym obszarem ekranu są ładowane dopiero wtedy, gdy użytkownik do nich doscrolluje. Implementacja jest banalnie prosta – wystarczy jeden atrybut HTML:
<img src="zdjecie.webp" alt="Opis" loading="lazy">Obsługują go wszystkie nowoczesne przeglądarki. Jedynym wyjątkiem powinny być zdjęcia widoczne od razu po załadowaniu strony (above the fold) – dla nich lazy loading jest przeciwskuteczny, bo opóźnia ładowanie elementu, który użytkownik widzi jako pierwszy.
Dla tych krytycznych obrazów warto użyć atrybutu fetchpriority="high", który informuje przeglądarkę, że dany zasób powinien zostać pobrany w pierwszej kolejności:
<img src="baner-glowny.webp" alt="Opis banera" fetchpriority="high">Atrybut alt to element, o którym programiści pamiętają dla dostępności, ale rzadziej myślą o nim w kontekście SEO. Google indeksuje tekst alternatywny i używa go do zrozumienia kontekstu zdjęcia. Dobry alt to zwięzły opis tego, co faktycznie przedstawia zdjęcie – nie lista słów kluczowych, nie puste pole, nie „zdjęcie1.jpg”.
Atrybut width i height – podanie wymiarów zdjęcia bezpośrednio w HTML pozwala przeglądarce zarezerwować odpowiednią przestrzeń przed załadowaniem obrazu. Eliminuje to efekt skakania layoutu (Cumulative Layout Shift), który jest kolejnym wskaźnikiem Core Web Vitals wpływającym na SEO.
Optymalizacja zdjęć to jedna z tych czynności, gdzie stosunkowo niewielki wysiłek przynosi nieproporcjonalnie duże efekty – zarówno dla użytkownika, jak i dla widoczności w Google. Jeśli chcesz omówić optymalizację konkretnej strony lub masz pytania dotyczące narzędzi – odezwij się przez formularz kontaktowy.
Warto regularnie audytować zdjęcia na stronie narzędziem Google PageSpeed Insights lub Lighthouse – oba są darmowe i pokazują dokładnie, które obrazy wymagają uwagi i ile można zyskać po ich optymalizacji.
