Dobierz obraz do zadania
W sklepie zdjęcie ma umożliwić ocenę produktu; w poradniku może wyjaśniać krok. Ogólna ilustracja nie zastąpi fotografii złącza, wymiarów lub detalu istotnego przy zakupie. Najpierw zdecyduj, co odbiorca ma dzięki obrazowi zrozumieć.
Google zaleca udostępnianie obrazów w obsługiwanym HTML, sensowny kontekst oraz opisowe teksty alternatywne. Obraz osadzony wyłącznie jako tło CSS nie jest traktowany tak samo jak obraz w elemencie img.
Przygotuj warianty zamiast jednego ogromnego pliku
Dopasuj szerokości do rzeczywistych miejsc wyświetlania. Przeglądarka może wybrać wariant przez srcset i sizes. Sprawdź format i kompresję na zdjęciu z drobnymi detalami, nie tylko na gładkim tle. Zbyt mocna kompresja może utrudniać ocenę produktu.
Zdjęcie o szerokości 5000 pikseli ma służyć jako miniatura i większy podgląd. Przygotuj osobne warianty dla tych zastosowań, zamiast wysyłać pełny plik każdemu użytkownikowi. Zachowaj oryginał poza zestawem publicznych miniaturek.
Zadbaj o miejsce i moment ładowania
Podaj wymiary lub właściwe proporcje, aby przeglądarka mogła zarezerwować miejsce. Obrazy daleko pod pierwszym ekranem mogą korzystać z ładowania odroczonego. Nie stosuj go automatycznie do najważniejszego zdjęcia widocznego po wejściu — sprawdź wpływ na LCP.
Na telefonie oceń także kadrowanie. Technicznie poprawny plik może obcinać ważny napis lub element produktu. Kontrola na szerokim monitorze nie zastępuje oceny małego ekranu.
Opis alternatywny ma przekazywać znaczenie
Opisuj istotną zawartość w kontekście strony. Nie dodawaj listy fraz pozycjonujących. Obraz dekoracyjny może mieć pusty tekst alternatywny; ważny wykres potrzebuje dostępnego wyjaśnienia danych również poza samą bitmapą.
Po wdrożeniu sprawdź uszkodzone odnośniki, ładowanie wariantów i wygląd przy wolniejszym połączeniu. Optymalizacja jest ukończona wtedy, gdy obraz nadal spełnia swoje zadanie, a nie tylko wtedy, gdy jego plik jest mniejszy.
DO WYKORZYSTANIA W PRAKTYCE
Twoja lista kontrolna
- Ustal rolę zdjęcia lub ilustracji.
- Przygotuj warianty wymiarów i sprawdź jakość.
- Zarezerwuj miejsce, kontroluj obraz LCP.
- Dopasuj tekst alternatywny do kontekstu.
Źródła i aktualność
Dokumentacja sprawdzona 21 września 2026 r. Przykłady w artykule są ilustracyjne — nie opisują wyników audytu ani realizacji klienta.
Materiał edukacyjny opracowany z pomocą AI na podstawie wskazanych źródeł. Nie zastępuje indywidualnej oceny strony przez specjalistę. Zasady redakcyjne.