Najpierw zdecyduj, po co jest obraz
Fotografia produktu, wykres i dekoracyjna ilustracja pełnią różne funkcje. Zanim wybierzesz format pliku, określ, co odbiorca ma dzięki obrazowi zrozumieć. Czy pokazuje szczegół, porównanie, wynik pomiaru czy tylko uzupełnia kompozycję? Google w zaleceniach dla obrazów zwraca uwagę na ich kontekst i sposób udostępniania. Dla redaktora oznacza to potrzebę powiązania grafiki z konkretną informacją w tekście.
Nie przedstawiaj ilustracji jako dowodu realizacji, jeśli nie pokazuje rzeczywistej pracy firmy. Przy symulowanym wykresie albo przykładzie zaznacz, że dane mają charakter poglądowy. Zdjęcia ludzi, miejsc i projektów powinny mieć właściwie ustalone prawa wykorzystania. Estetyczny materiał nie staje się automatycznie rzetelnym świadectwem doświadczenia tylko dlatego, że pasuje do kolorystyki strony.
ALT powinien odpowiadać roli grafiki
Tekst alternatywny powinien opisywać informację istotną w danym kontekście, zamiast być listą fraz kluczowych. Google zaleca użyteczne, naturalne opisy i unikanie ich sztucznego przeładowywania. Przy obrazie oferty napisz, co faktycznie przedstawia. Nie dodawaj nazwy usługi, miasta i obietnicy jakości, jeśli grafika nie przekazuje takiego znaczenia.
Jeżeli obraz jest czysto dekoracyjny, nie wymuszaj na nim rozbudowanego opisu. Gdy zawiera złożone dane, sam krótki ALT może nie wystarczyć do ich przekazania; dodaj zrozumiałe wyjaśnienie w treści strony. Przykładowy wykres zmian wskaźnika powinien mieć podane źródło, zakres dat i sposób interpretacji. Czytelnik nie powinien być zmuszony do odczytywania wszystkich informacji wyłącznie z kolorowych linii.
Dobieraj format do zawartości
WebP i AVIF mogą być wykorzystywane w obsługiwanych przez Google formatach obrazów. W praktyce wybór warto oprzeć na porównaniu jakości i rozmiaru konkretnego pliku. Fotografia z wieloma szczegółami zachowuje się inaczej niż prosty znak firmowy lub zrzut ekranu z drobnym tekstem. Nie ma potrzeby zmieniać wszystkiego na jeden format bez sprawdzenia czytelności i obsługi w docelowym środowisku.
Dla fotografii obejrzyj detale, krawędzie i gradienty po konwersji. Dla zrzutu ekranu sprawdź, czy tekst nadal da się przeczytać na telefonie. Jeżeli ilustracja ma przezroczystość, porównaj ją na jasnym i ciemnym tle. Sam procent jakości ustawiony w eksporcie nie mówi jeszcze, czy finalny obraz spełnia swoją rolę. Odbiór powinien obejmować rzeczywisty plik wyświetlany na stronie.
Przygotuj kilka rozmiarów zamiast jednego olbrzymiego pliku
Obraz zajmujący małą kartę nie zawsze potrzebuje tego samego wariantu co szeroki nagłówek. Mechanizmy responsywnych obrazów pozwalają wskazać przeglądarce dostępne pliki i sposób ich użycia. Google opisuje obsługę takich rozwiązań, w tym obecność zwykłego elementu img. Deweloper powinien dobrać konfigurację do faktycznego układu, a redaktor otrzymać proces niewymagający ręcznego wpisywania wszystkich parametrów.
Sprawdź na kilku szerokościach, jaki plik rzeczywiście został pobrany. Nie wystarczy, że w kodzie znajduje się srcset, jeżeli błędne sizes prowadzi do wyboru niepotrzebnie dużego wariantu. Zwróć uwagę także na ostrość. Zbyt mały obraz rozciągnięty na szeroki ekran może wyglądać gorzej niż nieco większy plik. Celem jest rozsądna równowaga między jakością a kosztem pobrania.
Oddziel pierwszy widok od obrazów dalszej części strony
Najważniejsza grafika w początkowym widoku powinna być analizowana w kontekście ładowania głównej treści. Core Web Vitals obejmują między innymi pomiar LCP, co opisuje dokumentacja web.dev. Nie oznacza to jednak, że każdy obraz należy ładować z najwyższym priorytetem. Priorytet przestaje pomagać, gdy wszystkie zasoby otrzymują identyczne pierwszeństwo bez związku z ich rolą.
Dla grafik poza pierwszym widokiem można zastosować opóźnione ładowanie, ale należy sprawdzić, czy zawartość pojawia się we właściwym momencie podczas przewijania. Zarezerwuj miejsce na obraz, aby tekst nie przeskakiwał po pobraniu pliku. Test przeprowadź zarówno przy nowej wizycie, jak i po podmianie materiału w CMS. Właśnie późniejsze aktualizacje często ujawniają brak odporności szablonu na inne proporcje.
Zaplanuj bezpieczną pracę w CMS
Redaktor powinien móc podmienić grafikę bez naruszania struktury strony. System może sprawdzać typ i rozmiar pliku, tworzyć warianty oraz zachowywać ustalone proporcje komponentu. W procedurze publikacji zostaw miejsce na zmianę ALT i podpisu, ponieważ nowy obraz może przedstawiać coś innego. Sam automatyczny opis wygenerowany z nazwy pliku nie gwarantuje poprawnego przekazania znaczenia.
Po podmianie sprawdź kilka miejsc wykorzystujących ten sam zasób: listę wpisów, artykuł, podgląd udostępnienia i ewentualne materiały dodatkowe. Nie usuwaj dawnych plików bez ustalenia, czy nie są jeszcze używane. Warto prowadzić prostą informację o przeznaczeniu obrazu. Pomaga to uniknąć sytuacji, w której porządkowanie katalogu mediów przypadkowo usuwa grafikę z archiwalnego poradnika.
Kontroluj jakość treści i prezentacji razem
Na końcu sprawdź obrazy w otoczeniu nagłówków i akapitów. Czy grafika wspiera odpowiedź, czy tylko wydłuża przewijanie? Czy podpis nie obiecuje wyniku, którego nie potwierdzają dane? Zalecenia Google dotyczące pomocnych treści kładą nacisk na wartość dla odbiorcy. Ta zasada dotyczy również warstwy wizualnej: ilustracja powinna ułatwiać zrozumienie, a nie zastępować brakujący argument.
Przy odbiorze strony poproś o pokazanie rzeczywiście używanych wariantów i sposobu konwersji nowych uploadów. Nie oceniaj optymalizacji wyłącznie po rozszerzeniu pliku. Znaczenie mają rozmiary, kontekst, jakość i zachowanie na różnych urządzeniach. Dobrze przygotowany proces pozwala zachować te cechy po kolejnych publikacjach, zamiast wymagać osobnej interwencji technicznej przy każdym nowym zdjęciu.