Optymalizacja obrazów na stronie: formaty i rozmiary

Optymalizacja obrazów to przygotowanie grafik tak, aby ważyły jak najmniej przy zachowaniu jakości, jaką widzi użytkownik. Na typowej stronie firmowej to właśnie zdjęcia odpowiadają za największą część przesyłanych danych, więc od nich zależy, jak szybko strona się ładuje, zwłaszcza na telefonie i słabszym łączu. W tym poradniku przechodzimy przez formaty, wymiary, kompresję, lazy loading i opisy alternatywne, a na końcu dajemy checklistę do przejrzenia własnej strony.

Najważniejsze w skrócie

• Na większości stron obrazy stanowią największą część wagi strony, dlatego ich optymalizacja daje zwykle najszybszy efekt.
• WebP jest dziś bezpiecznym domyślnym formatem dla zdjęć, bo obsługują go wszystkie popularne przeglądarki.
• Obraz nie powinien być szerszy niż największy rozmiar, w jakim faktycznie wyświetla się na stronie.
• Grafika główna widoczna od razu po wejściu nie powinna mieć lazy loadingu, bo opóźnia to wskaźnik LCP.
• Każdy obraz niosący treść potrzebuje atrybutu alt, który opisuje, co przedstawia.

Dlaczego optymalizacja obrazów wpływa na SEO i sprzedaż

Google ocenia doświadczenie użytkownika między innymi przez Core Web Vitals. Najważniejszym z nich w kontekście grafik jest LCP (Largest Contentful Paint), czyli czas wyświetlenia największego elementu widocznego na ekranie. Za dobry wynik uznaje się LCP do 2,5 sekundy. Na wielu stronach największym elementem jest właśnie zdjęcie w sekcji hero, więc jego waga i sposób ładowania bezpośrednio decydują o wyniku.

Poza rankingiem liczy się też zwykła cierpliwość odwiedzających. Strona, na której zdjęcia doczytują się kawałkami, wygląda na niedopracowaną, a użytkownik mobilny płaci za każdy zbędny megabajt transferu. Dobrze przeprowadzona optymalizacja obrazów jest więc jednym z najtańszych sposobów na szybszą stronę. Więcej o szybkości stron i metrykach znajdziesz na blogu LessCMS.

Formaty obrazów: który wybrać

JPEG i PNG: klasyka z ograniczeniami

JPEG dobrze radzi sobie ze zdjęciami, ale nie obsługuje przezroczystości, a przy mocnej kompresji pojawiają się widoczne artefakty. PNG zachowuje każdy piksel, więc sprawdza się przy zrzutach ekranu i grafikach z drobnym tekstem, ale zdjęcie zapisane jako PNG potrafi ważyć wielokrotnie więcej niż ten sam obraz w JPEG. Częsty błąd to wrzucanie na stronę zdjęć produktowych jako PNG tylko dlatego, że tak wyeksportował je program graficzny.

WebP i AVIF: nowoczesne formaty

WebP przy podobnej jakości daje zwykle wyraźnie mniejsze pliki niż JPEG i obsługuje przezroczystość, więc może zastąpić oba klasyczne formaty. AVIF kompresuje jeszcze mocniej, ale jego kodowanie trwa dłużej, a narzędzia nie zawsze dobrze go obsługują. Dla większości stron firmowych WebP jest rozsądnym kompromisem między wagą, jakością i zgodnością.

SVG dla logo i ikon

Logo, ikony i proste ilustracje najlepiej zapisywać jako SVG. To grafika wektorowa, więc wygląda ostro na każdym ekranie i zwykle waży bardzo mało. Nie nadaje się natomiast do zdjęć.

Rozmiary obrazów na stronie: ile pikseli naprawdę potrzebujesz

Zdjęcie z aparatu czy telefonu ma często kilka tysięcy pikseli szerokości, a na stronie wyświetla się w kolumnie szerokiej na kilkaset. Przeglądarka i tak pobiera cały plik, a potem go pomniejsza. Zasada jest prosta: plik nie powinien być dużo szerszy niż miejsce, w którym się wyświetla, z zapasem na ekrany o wysokiej gęstości pikseli.

Orientacyjne szerokości dla typowych miejsc na stronie:

• Hero na całą szerokość: około 1920–2400 px.
• Zdjęcie w treści artykułu: około 1200–1600 px.
• Karta w siatce lub miniatura: około 600–800 px.
• Zdjęcie zespołu lub avatar: około 400 px.

Te wartości to punkt wyjścia, a nie sztywna norma. Sprawdź w narzędziach przeglądarki, jaką szerokość faktycznie zajmuje obraz w twoim układzie.

Kompresja zdjęć: optymalizacja obrazów bez utraty jakości

Kompresja stratna usuwa informacje, których oko zwykle nie zauważa. Przy zdjęciach jakość w okolicach 75–85% jest zazwyczaj nie do odróżnienia od oryginału, a plik jest wyraźnie lżejszy. Najlepiej porównać wynik na ekranie, zamiast polegać na jednej liczbie. Do ręcznej pracy wystarczą darmowe narzędzia, na przykład Squoosh w przeglądarce, a przy wielu plikach lepiej sprawdza się automatyczna konwersja po stronie systemu.

Ręcznie czy automatycznie: optymalizacja obrazów w zespole

Ręczna optymalizacja obrazów działa, dopóki stronę prowadzi jedna staranna osoba. Gdy zdjęcia dodaje kilku redaktorów, ktoś prędzej czy później wgra plik prosto z telefonu. Dlatego lepiej, gdy konwersja do nowoczesnego formatu dzieje się automatycznie po stronie systemu, a zespół pilnuje tylko dwóch rzeczy: sensownego kadru i rozsądnej rozdzielczości pliku źródłowego. Warto też spisać krótką instrukcję dla redaktorów, na przykład: zdjęcia do treści maksymalnie 2000 px szerokości, zawsze z uzupełnionym altem, bez tekstu wtopionego w grafikę. Taka kartka zapobiega większości problemów, zanim trafią na stronę.

Lazy loading i ładowanie grafiki hero

Lazy loading, czyli leniwe ładowanie, odkłada pobieranie obrazów do momentu, gdy użytkownik przewinie stronę w ich pobliże. W HTML wystarczy atrybut loading="lazy". To świetne rozwiązanie dla galerii i zdjęć w dalszej części strony, ale szkodliwe dla grafiki widocznej od razu po wejściu. Obraz hero ładowany leniwie pojawia się później, co pogarsza LCP. Dodatkowo każdemu obrazowi warto nadać atrybuty szerokości i wysokości, żeby przeglądarka zarezerwowała miejsce i układ nie przeskakiwał, co chroni wskaźnik CLS.

Nazwy plików i atrybut alt

Optymalizacja obrazów to nie tylko waga pliku. Opisowa nazwa, na przykład gabinet-stomatologiczny-poczekalnia.webp zamiast IMG_4832.jpg, pomaga wyszukiwarce zrozumieć kontekst. Atrybut alt opisuje obraz osobom korzystającym z czytników ekranu i wyszukiwarkom. Pisz go jak krótkie zdanie o tym, co widać na zdjęciu, bez upychania słów kluczowych. Grafiki czysto dekoracyjne mogą mieć pusty alt.

Checklista: optymalizacja obrazów na stronie firmowej

1. Zdjęcia zapisane w WebP (lub AVIF), logo i ikony w SVG.
2. Szerokość pliku dopasowana do miejsca wyświetlania.
3. Kompresja sprawdzona wizualnie, bez widocznych artefaktów.
4. Lazy loading dla obrazów poniżej pierwszego ekranu, bez lazy loadingu dla hero.
5. Wymiary obrazów określone, aby układ nie przeskakiwał.
6. Opisowe nazwy plików i sensowne teksty alt.
7. Kontrola LCP w PageSpeed Insights po każdej większej zmianie.

Najczęstsze błędy, które psują optymalizację obrazów

• Zdjęcia prosto z aparatu wrzucone bez zmniejszania.
• Tekst wstawiony jako grafika zamiast jako treść HTML.
• Karuzela z kilkoma dużymi zdjęciami w sekcji hero.
• Brak altów albo alty w stylu „zdjęcie1”.

Jak to wygląda w LessCMS

• Obrazy dodane do biblioteki mediów są automatycznie optymalizowane do formatu WebP, więc nie musisz konwertować ich ręcznie.
• Biblioteka mediów ma foldery i wyszukiwarkę, co ułatwia porządek w grafikach przy większej stronie.
• Strony są renderowane po stronie serwera i serwowane z sieci CDN na brzegu, co pomaga w szybkim wyświetlaniu treści.
• W edytorze stron ustawiasz osobny wygląd sekcji dla komputera, tabletu i telefonu.

Najczęstsze pytania

Jaki format obrazów jest najlepszy na stronę internetową?

Dla zdjęć najlepszym domyślnym wyborem jest WebP, a dla logo i ikon SVG. AVIF daje jeszcze mniejsze pliki, ale bywa gorzej obsługiwany przez narzędzia graficzne.

Ile powinno ważyć zdjęcie na stronie?

Nie ma jednej normy, ale zdjęcie w treści zwykle mieści się w kilkudziesięciu do około 200 KB. Duża grafika hero może ważyć więcej, jednak plik liczony w megabajtach to sygnał, że optymalizacja obrazów została pominięta.

Czy lazy loading poprawia SEO?

Pośrednio tak, bo przyspiesza ładowanie strony. Nie stosuj go jednak dla obrazów widocznych od razu po wejściu, ponieważ opóźnia to wskaźnik LCP.

Czy atrybut alt ma znaczenie dla pozycjonowania?

Tak, alt pomaga wyszukiwarce zrozumieć, co przedstawia obraz, i jest ważny dla dostępności. Opisuj rzeczową zawartość zdjęcia zamiast wypisywać słowa kluczowe.

Jak sprawdzić, czy optymalizacja obrazów na mojej stronie jest wystarczająca?

Uruchom test w PageSpeed Insights i sprawdź, który element odpowiada za LCP oraz jakie sugestie dotyczą obrazów. Raport wskaże zbyt duże pliki i formaty, które warto zmienić.

Chcesz, żeby zdjęcia na twojej stronie same zamieniały się w WebP? Zobacz plany LessCMS i załóż konto bez karty.