Obraz jest gotowy do publikacji na stronie, gdy ma jasny cel, zgodę na wykorzystanie, odpowiedni kadr, sprawny plik i tekst alternatywny dopasowany do swojej roli. Najmniejszy plik nie zawsze jest najlepszy: odbiorcy nadal muszą rozpoznać produkt, odczytać schemat lub zrozumieć sens ilustracji. Przed zatwierdzeniem sprawdź obraz na stronie, na której będzie wyświetlany.
Korzystaj z tej listy podczas przygotowywania nowej witryny, wymiany zbyt dużego banera lub przekazywania materiałów programiście. Najpierw opracuj jeden reprezentatywny obraz, uzgodnij decyzje, a następnie zastosuj ten proces do pozostałych. Zachowaj oryginał osobno, aby przyszła przebudowa strony nie zależała od pliku, który został już skompresowany.
1. Ustal, co obraz ma przekazywać
Opisz zadanie każdego obrazu jednym zdaniem. Zdjęcie produktu może pokazywać wykończenie powierzchni, schemat procesu wyjaśniać kolejność działań, a dekoracyjna tekstura budować nastrój strony. Jeśli nikt nie potrafi wskazać zadania, zastanów się, czy warto pobierać ten plik. Stronę można odciążyć przez usunięcie zbędnego obrazu, a nie tylko przez kompresowanie wszystkich istniejących.
Obok pliku źródłowego zapisz pochodzenie, autora lub dostawcę, dozwolone wykorzystanie oraz wymagane oznaczenie autorstwa. Sprawdź, czy zgoda obejmuje planowane użycie w witrynie, a także edycję lub kadrowanie. Sam fakt otrzymania pliku pocztą elektroniczną nie rozstrzyga tych kwestii. Niejasności wyjaśnij z właściwym posiadaczem praw lub wykwalifikowanym doradcą. To element zarządzania materiałami, a nie porada prawna.
W przypadku wygenerowanych ilustracji koncepcyjnych zachowaj prompt i zapis generowania oraz rzetelnie określ ich rolę. Nie przedstawiaj wymyślonego biura, zespołu czy produktu jako zdjęcia firmy. Usuń zbędne dane osobowe ze zrzutów ekranu i obejrzyj gotowy eksport, również informacje widoczne na kartach przeglądarki lub w panelach kont.
2. Dobierz format do treści
Wybierz format wyjściowy, przygotuj próbny eksport i porównaj go z oryginałem w rozmiarze, w jakim zobaczą go odbiorcy. Te same ustawienia kodowania dają różne efekty w różnych obrazach. Nie istnieje jedna wartość jakości ani rozszerzenie, które sprawia, że każdy materiał nadaje się do publikacji.
- Zdjęcia i szczegółowe ilustracje: porównaj WebP lub AVIF z dobrze zakodowanym JPEG. Wybierz wariant, który zachowuje istotne szczegóły przy akceptowalnej wielkości transferu.
- Proste logotypy i schematy: rozważ SVG, jeśli masz wiarygodny oryginał wektorowy. Sprawdź dostarczony SVG przed umieszczeniem go w witrynie i pozostaw istotną treść tekstową dostępną na stronie.
- Grafika rastrowa wymagająca precyzyjnych krawędzi lub przezroczystości: porównaj PNG z odpowiednim bezstratnym lub przezroczystym eksportem WebP. Obejrzyj cienkie linie, litery i półprzezroczyste krawędzie na docelowym tle.
- Materiały animowane: najpierw ustal, czy ruch wnosi informację. Nieruchomy obraz może przekazać to samo, mniej rozpraszając odbiorcę i upraszczając sposób dostarczania materiału.
To punkty wyjścia do testów, a nie obowiązek przygotowania każdego formatu. Każdy dodatkowy wariant potrzebuje uzasadnienia i działającego sposobu dostarczania. Nieużywany AVIF zapisany obok wyświetlanego JPEG niczego nie poprawia. Zachowaj ustawienia eksportu w dokumentacji materiału, aby inna osoba mogła odtworzyć poprawkę bez zgadywania.
3. Dopasuj wymiary do układu strony
Rozróżniaj wymiary źródła, wymiary wyświetlania i kadr. Zdjęcie może mieć tysiące pikseli szerokości, a pojawiać się na niewielkiej karcie. Dostarczanie pełnego oryginału z aparatu do każdej karty marnuje transfer, niekoniecznie zwiększając jej użyteczność. Z kolei rozciągnięcie małego eksportu na dużym ekranie ujawnia brak ostrości.
Kod obrazów responsywnych może udostępniać kilka szerokości przez srcset, a sizes opisuje oczekiwaną szerokość w układzie strony. Przeglądarka wybiera zasób na podstawie tych informacji i warunków, w których działa. Użyj picture, gdy trzeba zmienić kompozycję, na przykład zastosować ciaśniejszy kadr na telefonie. MDN wyjaśnia różnicę między wyborem rozdzielczości a zmianą kompozycji w przewodniku po obrazach responsywnych.
Na potrzeby przeglądu wypisz rzeczywiste miejsca użycia: baner na całą szerokość, obraz w układzie dwukolumnowym, kartę i podgląd w mediach społecznościowych. Sprawdź wąski telefon oraz szeroki ekran. Nie umieszczaj ważnego obiektu przy krawędziach, które znikną podczas kadrowania. Jeśli ucięta jest twarz, etykieta lub istotny element, zmiana kompresji nie pomoże. Trzeba zmienić kadr lub układ.
Ustaw odpowiednie atrybuty width i height, aby przeglądarka mogła zarezerwować miejsce zgodnie z proporcjami obrazu. Upewnij się, że responsywny CSS i alternatywne kadry są zgodne z tym miejscem. Sprawdź zarówno początek ładowania, jak i gotową stronę: stabilny zrzut ekranu może nie pokazać wcześniejszego przesunięcia treści.
4. Kompresuj, zachowując to, co istotne
Porównuj eksporty obok siebie w docelowym rozmiarze wyświetlania. Szukaj pasów w gradientach, obwódek przy cienkich krawędziach, rozmycia drobnych szczegółów i nieoczekiwanych konturów w przezroczystych obszarach. Przy zdjęciach produktów sprawdź, czy nie zniknęła faktura albo różnica koloru. Dopuszczalny kompromis zależy od tego, czego odbiorca ma się dowiedzieć.
Uzgodnij roboczy limit wielkości pliku dla każdego miejsca użycia, a następnie przeanalizuj wyjątki. Szczegółowa ilustracja instruktażowa może uzasadniać większy plik niż dekoracyjna karta. Limit powinien prowadzić do rzeczowej rozmowy o formacie, kadrze i wymiarach. Nie powinien wymuszać nieczytelnego efektu ani stawać się zmyśloną uniwersalną zasadą w rodzaju „każdy obraz musi mieć mniej niż 100 KB”.
Mierz plik rzeczywiście odbierany przez przeglądarkę. System zarządzania treścią może ponownie skompresować przesłany materiał, dostarczyć nieoczekiwany wariant lub zachować poprzedni obraz w pamięci podręcznej. Po publikacji sprawdź wyrenderowaną stronę i odpowiedź sieciową. Zachowaj jeden zatwierdzony plik źródłowy oraz jasno nazwane eksporty, zamiast wielokrotnie zapisywać już skompresowany obraz z kolejną stratą jakości.
5. Napisz tekst alternatywny zgodny z rolą obrazu
Zacznij od otaczającej treści. Obrazy informacyjne wymagają tekstu alternatywnego przekazującego ich istotne znaczenie, a dekoracyjne zazwyczaj pustego alt="". Jeśli obraz nadaje dostępną nazwę linkowi lub przyciskowi, opisz działanie albo miejsce docelowe. Złożone schematy potrzebują pełniejszego objaśnienia w pobliżu. Drzewo decyzyjne W3C dotyczące tekstów alt pomaga odróżnić te sytuacje.
Na przykład zbliżenie na stronie o materiałach może mieć opis „Uchwyt ze szczotkowanego mosiądzu z zaokrągloną krawędzią”. Ikona będąca linkiem do pobrania wymaga informacji o celu pobrania, a nie opisu strzałki. Dekoracyjna poświata za nagłówkiem nie powinna ogłaszać każdemu użytkownikowi czytnika ekranu „niebieskie świecące tło”. Ten sam obraz może wymagać innego tekstu na innej stronie, ponieważ zmienia się jego zadanie.
Pisz zwięźle i naturalnie. Uwzględniaj szczegóły tylko wtedy, gdy pomagają zastąpić istotną informację wizualną. Nie wypełniaj atrybutu słowami kluczowymi dotyczącymi usług. Sprawdź, czy podpis lub sąsiedni akapit nie przekazuje już tego samego, i unikaj zbędnego powtarzania treści. Tłumacz teksty alternatywne razem ze stroną, uwzględniając znaczenie lokalizowanych etykiet i zrzutów ekranu.
Sprawdź stronę przy niedostępnych obrazach i przejrzyj dostępne nazwy linków graficznych. Pozwala to wychwycić brakujące informacje i podwójne komunikaty, które mogą umknąć podczas oglądania strony. Automatyczne testy potrafią wykryć brak atrybutu, lecz nie ocenią wiarygodnie, czy zdanie opisuje właściwą rzecz.
6. Wczytaj ważny obraz we właściwym momencie
Głównego obrazu widocznego po wejściu na stronę nie należy opóźniać przez leniwe ładowanie. Obrazy znajdujące się dalej mogą korzystać z loading="lazy". Dla nich również zarezerwuj miejsce. Wskazówki web.dev dotyczące leniwego ładowania wyjaśniają, dlaczego obrazy widoczne na początku wymagają innego traktowania niż te poza początkowym obszarem widoku.
Sprawdź, który obraz rzeczywiście staje się największym widocznym elementem strony. Duży dekoracyjny baner może konkurować z nagłówkiem i użyteczną treścią. Jeśli główny obraz prawdopodobnie będzie elementem mierzonym przez Largest Contentful Paint, zadbaj o jego wczesne wykrycie przez przeglądarkę i oceń zasadność wysokiego priorytetu pobierania. Nadanie wysokiego priorytetu wszystkim obrazom usuwa tę użyteczną różnicę.
Przeprowadź test przy świeżym załadowaniu strony i ograniczonej przepustowości, a następnie przewiń ją do końca. Szukaj miejsc, które pozostają puste, widocznych przesunięć treści oraz plików znacznie większych, niż wymaga ich obszar wyświetlania. Lokalny audyt wydajności traktuj jako dowód dotyczący konkretnej strony i konfiguracji testu, a nie obietnicę dla każdego połączenia lub urządzenia odbiorcy.
7. Przed eksportem uzupełnij arkusz decyzji
Przechowuj tę krótką dokumentację razem z folderem materiałów. Łączy decyzję wizualną z kontrolą wdrożenia i daje kolejnemu redaktorowi coś użyteczniejszego niż nazwę pliku zakończoną słowem „final”. Jeśli ten sam oryginał występuje w kilku miejscach, udokumentuj osobno każdą jego rolę.
| Decyzja | Co zapisać i sprawdzić |
|---|---|
| Cel i źródło | Co wyjaśnia obraz; plik źródłowy; zapis zgody lub zatwierdzenia. |
| Miejsce i kadr | Strona i obszar użycia; szerokości wyświetlania; punkt skupienia; kadr mobilny. |
| Eksport | Wybrany format; wymiary w pikselach; wielkość pliku; ustawienia; ocena wizualna. |
| Tekst alternatywny | Rola informacyjna, dekoracyjna lub funkcjonalna; przetłumaczony tekst; objaśnienie w pobliżu. |
| Dostarczanie | Warianty responsywne; zarezerwowane wymiary; sposób ładowania; opublikowany adres URL. |
Wyobraźmy sobie sklep z ceramiką przygotowujący zdjęcie miski na stronę produktu. Zatwierdzony oryginał ma 4000 pikseli szerokości. Zespół sprawdza rzeczywisty obszar na zdjęcie, eksportuje dwie przydatne szerokości, porównuje JPEG z WebP i wybiera wariant zachowujący szczegóły szkliwa. Kadr na telefonie pozostawia widoczny brzeg miski. Tekst alternatywny opisuje istotne wykończenie, a sąsiedni opis produktu zawiera wymiary i instrukcje pielęgnacji.
Ten przykład przedstawia proces podejmowania decyzji, a nie obowiązkową receptę na eksport ani wynik projektu klienta. Zbliżenie faktury, schemat wymiarów i dekoracyjny obraz kampanii prowadziłyby do innych wyborów. Zapisz powód wyjątku, aby kolejna aktualizacja go nie zniweczyła.
8. Sprawdź wykrywalność i gotową stronę
Dla istotnej treści używaj standardowych elementów obrazu, zapewnij działający adres zapasowy w src i pozostaw adresy obrazów dostępne dla robotów, jeśli mają być wykrywane. Nadawaj plikom opisowe nazwy i umieszczaj obrazy obok powiązanego tekstu. Wskazówki Google dotyczące SEO obrazów objaśniają te praktyki i zaznaczają, że Google nie indeksuje obrazów tła CSS. Takie kontrole wspierają wykrywalność, lecz nie gwarantują indeksacji ani pozycji w wynikach.
- Potwierdź zatwierdzony obraz, kadr i tekst alternatywny w każdym opublikowanym języku.
- Sprawdź wybrany plik responsywny, wymiary wewnętrzne i sposób ładowania.
- Przejdź po linkach graficznych za pomocą klawiatury i sprawdź, czy ich nazwy są zrozumiałe.
- Osobno obejrzyj podgląd w mediach społecznościowych, ponieważ może korzystać z innego kadru i pliku.
- Zachowaj oryginał, ustawienia eksportu i dokumentację zgody na kolejną aktualizację.
Jeśli przygotowanie obrazów stanowi część większego projektu witryny, poznaj usługę tworzenia stron Digital Studio i uwzględnij istniejące materiały oraz brakujące obrazy w briefie strony internetowej. Jasna lista materiałów pomaga rozpocząć projekt od konkretnych decyzji: co zachować, co wymienić, a co stworzyć.
