Zacznij od zdjęcia, które coś wyjaśnia
Zdjęcie powinno pomagać zrozumieć ofertę. W realizacji pokaż wykonany projekt, na podstronie usługi — istotny etap pracy, a w sklepie — cechy produktu. Ogólna fotografia biurka może pasować do poradnika, ale nie zastąpi dokumentacji rzeczywistego wdrożenia.
Wybierając materiał, sprawdź również prawa do jego wykorzystania. Przy zdjęciach generowanych przez AI zadbaj o uczciwy kontekst: ilustracja nie powinna udawać prawdziwej realizacji, zespołu ani klienta.
Nazwa pliku i otoczenie obrazu
Google zaleca opisowe nazwy plików, kontekst związany z tematem strony i umieszczanie obrazów w elementach HTML. Plik „montaz-ekranu-led-sala-konferencyjna.webp” mówi więcej niż „IMG_4837.jpg”. Samo przemianowanie zdjęcia nie gwarantuje jednak widoczności.
Dodaj krótki opis realizacji obok fotografii. Wyjaśnij, co przedstawia, jaki problem rozwiązano i dlaczego ma znaczenie dla klienta. Nie powtarzaj sztucznie tej samej frazy w nazwie, podpisie i każdym akapicie.
Alt opisuje znaczenie w danym miejscu
Tekst alternatywny pomaga osobom korzystającym z czytników ekranu. Dla zdjęcia informacyjnego opisz istotną treść, np. „Ekran LED zamontowany nad sceną w sali konferencyjnej”. Nie zaczynaj automatycznie każdego opisu od „zdjęcie” i nie dodawaj listy słów kluczowych.
Grafika czysto dekoracyjna zwykle powinna mieć pusty alt. Obraz będący jedyną treścią linku potrzebuje opisu celu tego linku. Ta sama fotografia może wymagać innego tekstu alternatywnego zależnie od zastosowania na stronie.
Dobierz rozmiar i format
Przygotuj plik do rozmiaru, w którym jest wyświetlany, z uwzględnieniem ekranów o większej gęstości pikseli. Nie przesyłaj pełnej fotografii z aparatu do małej miniatury. Testuj kompresję, oglądając szczegóły, krawędzie i napisy.
WebP i AVIF warto porównać z JPEG przy fotografiach. PNG może być przydatny przy przezroczystości, a SVG przy odpowiednich grafikach wektorowych. Nie ma jednej dobrej wagi dla wszystkich obrazów: liczy się wygląd i wpływ na czas ładowania.
Ładowanie bez skakania układu
Podaj wymiary obrazu, aby przeglądarka mogła zarezerwować miejsce. Dla różnych ekranów można dostarczyć różne rozdzielczości za pomocą srcset. Zdjęcia znajdujące się dalej na stronie mogą korzystać z lazy loading.
Nie opóźniaj automatycznie najważniejszej fotografii widocznej od razu po wejściu. Jeśli jest głównym elementem pierwszego ekranu, zbyt późne pobranie może pogorszyć odczuwalną szybkość strony.
Lista przed publikacją
- Zdjęcie pasuje do tematu i ma jasny status: realizacja albo ilustracja.
- Masz prawa do wykorzystania materiału.
- Plik ma opisową nazwę, a alt odpowiada jego funkcji.
- Rozdzielczość i kompresja są sprawdzone na telefonie i komputerze.
- Obraz ma zarezerwowane miejsce i właściwy sposób ładowania.