1. Sklasyfikuj obraz zanim go zoptymalizujesz
Sporządź inwentaryzację obrazów według szablonu. Zapisz rolę każdego obrazu, największą i najmniejszą renderowaną szerokość, status widoczności w początkowym widoku oraz czy na małych ekranach potrzebne jest inne przycięcie. To zamienia pracę nad rozmiarem pliku w decyzje, które możesz przetestować na istotnych stronach.
Zdjęcia często tolerują przemyślaną kompresję stratną. Logotypy, symbole interfejsu, grafika liniowa i wykresy mogą lepiej pasować do SVG lub rastra, który chroni ostre krawędzie. SVG nadaje się do grafiki liniowej, diagramów i wykresów, nie do szczegółowych zdjęć.
Zachowaj istotne detale i dostarcz tekst, który przekazuje cel obrazu.
Użyj pustego tekstu alternatywnego (alt=""); nie rób z niego jedynego źródła ważnej informacji.
Nazwij akcję lub cel, a nie tylko piksele obrazu.
2. Dopasuj rozmiar do miejsca w układzie, potem zaoferuj kandydatów responsywnych
Dopasuj wymiary wewnętrzne (intrinsic dimensions) do slotu CSS. Desktopowy plik w wąskiej karcie marnuje transfer; mały raster rozciągnięty zbyt mocno staje się rozmyty. Uwzględnij współczynnik gęstości pikseli urządzenia (device pixel ratio), ale weryfikuj wizualnie zamiast zakładać, że każdy ekran potrzebuje największego kandydata.
Dla tej samej kompozycji na różnych szerokościach użyj srcset z deskryptorami szerokości i użyj sizes, by określić faktyczną szerokość slotu. Przeglądarka wtedy wybierze odpowiedni kandydat. Użyj picture do art direction: przycięcie na małym ekranie, które zachowuje temat, różni się od jedynie pomniejszenia obrazu desktopowego. Zachowaj fallback przez umieszczenie img z src i alt wewnątrz picture.
Ta sama kompozycja, różne wymiary pikselowe.
Inne przycięcie lub kompozycja, gdy skalowanie ukrywa przekaz.
Zachowaj src na elemencie img dla klientów, którzy nie obsługują atrybutów responsywnych.
3. Wybierz format i kompresję zgodnie z cechami obrazu
WebP i AVIF mogą zmniejszyć transfer rastra w odpowiednich przypadkach, ale format nie jest gwarancją jakości. Testuj reprezentatywne twarze, drobną fakturę, firmowe gradienty, tekst osadzony w obrazie i przezroczystość. JPEG pozostaje powszechnym fallbackiem dla zdjęć; PNG może pasować do bezstratnych szczegółów rastra lub przezroczystości. Sprawdź wsparcie AVIF i dopasowanie operacyjne do Twoich klientów i stosu dostarczania.
Kompresja stratna usuwa informacje, by oszczędzić bajty i zwykle bardziej wybacza na detalicznych zdjęciach niż na ostrych liniach czy tekście. Kompresja bezstratna zachowuje zakodowane piksele, ale może oszczędzać mniej. Wybieraj jakość na podstawie porównań obok siebie w rozmiarze renderowanym, nie tylko ustawienia liczbowego. Usuń metadane dopiero po potwierdzeniu orientacji, koloru i potrzeb workflow.
Porównaj stratne AVIF, WebP i fallback JPEG w rozmiarze wyświetlania.
Preferuj odpowiednie SVG lub chroń ostre krawędzie rastra poprzez testy.
Potwierdź wygląd kanału alfa we wszystkich dostarczanych formatach i fallbackach.
4. Zadbaj o znacznik, który chroni szybkość i stabilność układu
Nadaj każdemu obrazowi treściowemu atrybuty width i height odpowiadające jego wewnętrznemu współczynnikowi proporcji. Przeglądarka może zarezerwować miejsce zanim plik przyjdzie, zmniejszając ruch układu. CSS nadal może ustawiać wyświetlane wymiary.
Używaj loading=lazy tylko poza początkowym widokiem. Nie lazy-loaduj obrazu, który prawdopodobnie będzie widoczny przy załadowaniu, szczególnie kandydata na LCP. fetchpriority=high to tylko względna wskazówka; stosuj ją oszczędnie i mierz efekt. Używaj elementów obrazów HTML dla treści, które potrzebują tekstu alternatywnego lub odkrywalności; Google dokumentuje, że obrazy ustawione za pomocą CSS nie są indeksowane.
Ustaw width i height, w tym na lazy-loadowanych obrazach galerii.
Trzymaj prawdopodobne obrazy LCP w trybie eager i sprawdzaj priorytet żądań.
Lazy-loaduj obrazy znajdujące się poza ekranem i testuj przewijanie przy ograniczonej sieci.
5. Zachowaj sens, odkrywalność i jakość wizualną
Tekst alternatywny zależy od celu i kontekstu. Opisz istotne informacje dla obrazu informacyjnego, użyj alt="" dla dekoracji i nazwij funkcję obrazka, gdy jest on linkiem lub przyciskiem. Dla złożonego wykresu lub diagramu dostarcz równoważne wyjaśnienie w pobliskim tekście. Nie używaj list słów kluczowych.
Dla odkrywalnych obrazów treści używaj standardowych elementów obrazów HTML, powiązanego pobliskiego tekstu, krótkich opisowych nazw plików tam, gdzie to praktyczne, oraz fallbacku z responsywnym markupem. Nie zamieniaj dekoracyjnych teł w redundantną zawartość tylko po to, by były odkrywalne.
Przejrzyj skompresowane pliki w największych i najmniejszych zamierzonych rozmiarach.
Preferuj zwykły tekst; w przeciwnym razie dostarcz równoważne sformułowanie.
Umieszczaj obrazy informacyjne blisko odpowiedniego tekstu na stronie.
6. Weryfikuj stronę, nie tylko pojedynczy zasób
Testuj reprezentatywne strony przy wąskich i szerokich viewportach. W narzędziach developerskich przeglądarki sprawdź wybrany kandydat z srcset, rozmiar transferu, renderowane wymiary i ruch układu. Ogranicz prędkość sieci, by ujawnić opóźnione obrazy hero i powolne galerie. Porównanie eksportów nie ujawni błędnej wartości sizes, nieoczekiwanego przycięcia czy problemów transformacji produkcyjnej.
Używaj sygnałów laboratoryjnych i polowych, kiedy są dostępne. Lighthouse i PageSpeed Insights mogą wskazać nieprawidłowo rozmiarowane obrazy; polowe LCP odzwierciedla realne wizyty w czasie. Porównuj ten sam szablon, klasę urządzenia, wersję wydania i okno pomiarowe. Nie przypisuj zmian metryki obrazowi, gdy równocześnie zmieniły się serwer, skrypty, fonty lub komponenty stron trzecich. Wdrażaj zmiany szablonów jako stopniowe i zachowuj możliwość rollbacku, dopóki nie zostaną zweryfikowane.
Potwierdź, że slot nie wybiera nieoczekiwanie przeskalowanego kandydata.
Sprawdź przycięcie, ostrość, kolor, alternatywy i stabilność układu.
Nazwij właściciela, oczekiwany sygnał i ścieżkę cofnięcia.