Jak zoptymalizować zdjęcia na stronę WWW, aby była szybsza - rozmiary, formaty i WebP

Zdjęcia i grafiki potrafią ważyć więcej niż cała reszta strony razem wzięta. Na przeciętnej stronie internetowej obrazy stanowią 50-70% całkowitej wagi. Jeśli nie zadbasz o ich format, rozmiar i kompresję, strona będzie wczytywać się wolno, wynik w PageSpeed będzie niższy, a użytkownik zamknie stronę nie sprawdzając oferty.

W tym artykule wyjaśniamy szczegółowo: jak działają różne formaty obrazów (JPEG, PNG, SVG, WebP, AVIF) i kiedy który wybrać, jak dobrać rozmiar zdjęcia do layoutu strony, jak działa kompresja stratna i bezstratna, czym są srcset i lazy loading, oraz jak optymalizować zdjęcia pod kątem SEO.

Dlaczego optymalizacja zdjęć ma tak duży wpływ na szybkość strony i SEO?

Według dokumentacji Google, obrazy są jedną z najczęstszych przyczyn wolnego ładowania strony - szczególnie na urządzeniach mobilnych (zobacz wskazówki w PageSpeed Insights oraz dokumentację „Image Optimization” w Google Developers ). Lekkie grafiki oznaczają:

• krótszy czas ładowania strony,
• lepsze wskaźniki Core Web Vitals (LCP, INP, CLS),
• dłuższy czas spędzony na stronie przez użytkownika,
• pośrednio lepszy wynik pozycjonowania strony.

Co to jest LCP, CLS i INP? LCP (Largest Contentful Paint) mówi, jak szybko wczytuje się największy element na stronie (często jest to właśnie zdjęcie). CLS (Cumulative Layout Shift) to „skakanie” układu podczas ładowania. INP (Interaction to Next Paint) pokazuje, czy strona szybko reaguje na kliknięcia.

Algorytm wyszukiwarki nie patrzy tylko na słowa kluczowe. Bierze pod uwagę również doświadczenie użytkownika: czy strona ładuje się szybko, czy obrazy nie skaczą po ekranie, czy na telefonie wszystko jest czytelne. Odpowiednia optymalizacja zdjęć to jeden z najprostszych sposobów, aby wpłynąć na szybkość ładowania bez przebudowy całego serwisu.

Jakie formaty zdjęć na stronę WWW wybrać? JPEG, PNG, SVG i WebP

Zanim zaczniesz optymalizować zdjęcia, warto zrozumieć, czym różnią się najpopularniejsze formaty plików graficznych.

JPEG (JPG) - klasyka do zdjęć

Format JPG / JPEG to wciąż najpopularniejszy format zdjęć na stronach www. Dobrze sprawdza się tam, gdzie mamy dużo kolorów i przejść tonalnych: zdjęcia produktów, ludzi, wnętrz, krajobrazów.

• kompresja stratna - możesz zmniejszyć rozmiar plików, ale przy zbyt dużej kompresji spadnie jakość obrazu,
• dobry kompromis między jakością zdjęcia a rozmiarem pliku,
• idealny jako format początkowy, jeśli później konwertujesz zdjęcia do WebP.

Jeśli pracujesz w Photoshopie lub podobnym programie, możesz już na etapie eksportu ustawić jakość na np. 60-80%, żeby zmniejszyć rozmiar plików przed wrzuceniem ich na serwer.

PNG - gdy ważna jest przejrzystość i ostre krawędzie

Format PNG najlepiej sprawdza się tam, gdzie liczy się ostrość i przezroczystość:

• logotypy na przezroczystym tle,
• ikony, elementy UI, diagramy, wykresy.

PNG stosuje kompresję bezstratną, więc zachowuje pełną jakość grafiki, ale rozmiar pliku potrafi być dużo większy niż przy JPEG. Jeśli używasz PNG tylko do zdjęć, prawdopodobnie niepotrzebnie obciążasz serwer.

SVG - grafiki wektorowe, które skalują się bez utraty jakości

SVG to format wektorowy. Nie przechowuje pikseli, tylko zestaw komend opisujących kształty. Sprawdza się najlepiej w:

• prostych ikon,
• logotypów,
• prostych ilustracji.

Zaletą SVG jest to, że grafiki wektorowych nie tracą jakości przy powiększaniu i zazwyczaj ważą bardzo mało. Warunek: plik musi być poprawnie eksportowany.

WebP - format nowej generacji opracowany przez Google

WebP to nowoczesny format plików opracowany przez Google (szczegóły znajdziesz w dokumentacji „WebP Compression Study” ). Umożliwia:

• kompresję stratną i bezstratną,
• obsługę przezroczystości (jak PNG),
• znaczne zmniejszenie rozmiaru pliku przy zachowaniu tej samej jakości obrazu.

W praktyce zdjęcia w formacie WebP potrafią być nawet o 25-35% lżejsze niż ich odpowiedniki w JPEG/PNG, a czasem więcej. Dzięki temu:

• zdjęcia na Twojej stronie ładują się szybciej,
• poprawia się czas ładowania całej witryny,
• rośnie wynik w PageSpeed Insights i jakość Core Web Vitals.

Nic dziwnego, że Google wprost rekomenduje używanie formatów obrazów nowej generacji - takich jak WebP lub AVIF (dane znajdziesz w raporcie Lighthouse i wytycznych „Serve images in next-gen formats” ).

Jeśli masz już zdjęcia w formacie JPG lub PNG i chcesz szybko sprawdzić, ile możesz zyskać, możesz od razu przekonwertować je do WebP. Skorzystaj z darmowego narzędzia:

Konwerter JPG/PNG na WebP online bez limitu - dodajesz pliki, wybierasz jakość i pobierasz lżejsze obrazy gotowe do wgrania na stronę.

AVIF - format jeszcze nowszy niż WebP

AVIF to format obrazu opracowany przez Alliance for Open Media (organizacja zrzeszająca m.in. Google, Netflix, Amazon). Jest oparty na kodeku wideo AV1 i oferuje jeszcze lepszą kompresję niż WebP.

Kiedy AVIF ma sens?

Według testów Netflix Technology Blog, AVIF może być o 50% lżejszy niż JPEG przy tej samej jakości wizualnej. W porównaniu z WebP różnica wynosi około 20%.

Źródło: Netflix Technology Blog - AVIF for Next-Generation Image Coding

AVIF sprawdza się szczególnie przy:

• zdjęciach z dużą ilością detali i gradientów,
• stronach, gdzie każdy kilobajt ma znaczenie (np. e-commerce z setkami produktów),
• sytuacjach, gdy chcesz maksymalnie poprawić LCP.

Wady AVIF

AVIF ma też ograniczenia: wolniejsze kodowanie (konwersja trwa dłużej niż przy WebP), mniejsza kompatybilność przeglądarek (Safari dodał wsparcie dopiero w 2023), oraz problemy z bardzo małymi obrazkami (ikony, miniatury), gdzie WebP wypada lepiej.

Praktyczna rekomendacja: jeśli dopiero zaczynasz optymalizację, zacznij od WebP - jest bezpieczniejszy i łatwiejszy we wdrożeniu. AVIF rozważ jako kolejny krok dla stron o dużym ruchu.

Rozmiar zdjęcia i rozdzielczość - jak dobrać wymiary do strony?

Kolejna rzecz to rozmiar zdjęcia w pikselach. Nawet najlepszy format WebP nie pomoże, jeśli wrzucisz na stronę plik 6000 x 4000 px, który w layoucie strony wyświetlasz jako mały kafel 400 px.

Jak dobrać rozmiar zdjęcia do układu strony?

Dobra praktyka: dopasuj rozdzielczość zdjęcia do maksymalnej szerokości, w jakiej będzie wyświetlane na stronie.

• baner na całą szerokość - zwykle wystarczy 1920 px,
• zdjęcie w treści bloga - ok. 1200-1600 px szerokości,
• miniatury, kafelki - 400-800 px.

Odpowiednia optymalizacja zdjęć pod kątem rozmiaru pozwala zmniejszyć rozmiar plików nawet kilkukrotnie bez widocznej utraty jakości.

Jeśli nie chcesz za każdym razem liczyć szerokości i wysokości ręcznie, możesz skorzystać z prostego narzędzia online, które pomoże dobrać kadr i wymiary pod stronę WWW i media społecznościowe:

Kadrowanie i zmiana rozmiaru zdjęcia online - wybierasz format (np. baner, kafelek, post na Instagram), przesuwasz kadr i pobierasz gotowy plik.

Kompresja zdjęć - jak zmniejszyć rozmiar plików bez utraty jakości?

Nawet dobrze dobrany format i rozmiar to nie wszystko. Kluczowa jest jeszcze kompresja, czyli zmniejszanie wagi pliku przy zachowaniu akceptowalnej jakości.

Kompresja stratna vs bezstratna

Kompresja stratna (np. JPEG, WebP w trybie lossy) - celowo usuwa część informacji z obrazu. Po co? Żeby plik ważył mniej i ładował się szybciej.

Kompresja bezstratna (PNG, WebP w trybie lossless) - nie usuwa danych i zachowuje pełną jakość. Po co? Gdy zależy Ci na ostrych krawędziach (np. logo) i minimalnych artefaktach.

W praktyce, przy stronach WWW krytyczny jest czas ładowania strony, więc najczęściej korzysta się z kompresji stratnej z ustawieniami, które dają dobry balans między jakością obrazu a wagą pliku.

Jak praktycznie kompresować zdjęcia?

Możesz:

• eksportować zdjęcia z np. Photoshopa z odpowiednią jakością (np. 60-80%),
• skorzystać z narzędzi online do kompresji,
• w przypadku WordPressa - użyć dedykowanej wtyczki do optymalizacji obrazów, która automatycznie przeliczy i zapisze pliki w WebP.

Według testów publikowanych w artykułach o optymalizacji SEO i Core Web Vitals, odpowiednia kompresja zdjęć potrafi obniżyć wagę strony nawet o kilkadziesiąt procent (przykładowe opracowania znajdziesz na blogach Cloudflare, web.dev i innych narzędzi CDN - źródła).

Responsive images - srcset i lazy loading

Nowoczesne strony wyświetlają się na różnych urządzeniach: od telefonów z ekranem 375 px do monitorów 4K. Wysyłanie tego samego obrazu 1920 px na telefon to marnotrawstwo transferu.

Atrybut srcset

Srcset to atrybut HTML, który pozwala zdefiniować kilka wersji obrazu. Przeglądarka sama wybiera odpowiednią wersję na podstawie szerokości ekranu i gęstości pikseli. Dzięki temu telefon pobierze wersję 400 px zamiast 1200 px - oszczędność nawet 70% transferu.

Lazy loading

Lazy loading to technika opóźnionego ładowania obrazów. Zamiast pobierać wszystkie obrazy na starcie, przeglądarka ładuje je dopiero, gdy użytkownik przewinie do nich stronę.

W nowoczesnym HTML wystarczy dodać atrybut loading="lazy" do znacznika img. Lazy loading jest szczególnie ważny dla stron z wieloma obrazami (blogi, sklepy). Poprawia czas pierwszego ładowania (LCP) i zmniejsza zużycie transferu.

Źródło: web.dev - Browser-level image lazy loading

Jak optymalizować zdjęcia z myślą o SEO?

Optymalizacja zdjęć to nie tylko kwestia techniczna (format, rozmiar, kompresja). W kontekście pozycjonowania stron liczy się również to, jak wyszukiwarka rozumie zawartość obrazów.

Nazwy plików i atrybut alt

Google nie widzi obrazów tak jak człowiek. Analizuje nazwę pliku i atrybut alt, żeby zrozumieć, co przedstawia grafika. Plik o nazwie sofa-szara-salon.webp z atrybutem alt="Szara sofa narożna w nowoczesnym salonie" daje wyszukiwarce jasny sygnał. Plik IMG_1234.webp z pustym alt nie mówi nic.

Dobrze opisane zdjęcia mogą pojawiać się w Google Grafika, co jest dodatkowym źródłem ruchu - szczególnie dla sklepów internetowych z wieloma produktami.

Kontekst na stronie

Wyszukiwarka analizuje też tekst wokół zdjęcia. Jeśli zdjęcie sofy jest otoczone tekstem o aranżacji salonu, Google lepiej rozumie kontekst. Dlatego warto umieszczać zdjęcia w logicznych miejscach - blisko powiązanej treści, nie losowo.

Podsumowanie priorytetów: co zrobić najpierw?

Jeśli chcesz szybko przyspieszyć stronę, nie musisz robić wszystkiego naraz. Zacznij od tych 4 rzeczy - zwykle dają największy efekt:

• Zmień format na WebP (albo AVIF tam, gdzie ma sens) - te formaty są zwykle lżejsze niż JPG/PNG przy tej samej jakości.
• Dopasuj wymiary zdjęć do miejsca na stronie - nie wgrywaj pliku 6000 px, jeśli w layoucie ma 1200 px.
• Ustaw rozsądną kompresję - dla zdjęć najczęściej sprawdza się kompresja stratna z jakością ok. 60–80%.
• Zadbaj o stabilny układ i lazy loading - podawaj wymiary obrazów i ładuj „cięższe” zdjęcia dopiero wtedy, gdy użytkownik do nich dojdzie.

Na koniec wróć do PageSpeed Insights i sprawdź, co poprawiło się w praktyce.