Jak zoptymalizować obrazy na stronach: formaty, rozmiary i dostawa
Wolne strony często zawierają zbyt duże obrazy. Za duże zdjęcia, niewłaściwe formaty i słaba dostawa wydłużają czas ładowania, obniżają widoczność w wyszukiwarkach i psują odbiór strony.
Rozwiązaniem nie jest jeden uniwersalny format, lecz uporządkowany proces: wybierz odpowiedni format, wyeksportuj właściwy rozmiar, dostarcz właściwą wersję i uporządkuj metadane oraz publikację.
Spis treści
Dlaczego optymalizacja obrazów na stronie jest ważna
Obrazy często są główną przyczyną wolnego ładowania strony. Gdy największe pliki na stronie to za duże zdjęcia, niewłaściwe formaty lub słaba dostawa responsywna, cierpi zarówno doświadczenie użytkownika, jak i wyniki w wyszukiwarkach.
Dlatego optymalizacja obrazów wymaga systemu, a nie przypadkowych poprawek. Potrzebny jest jasny plan dotyczący formatów, rozmiarów, dostawy i procesu publikacji.
Szybsze strony
Obrazy o odpowiednich rozmiarach w nowoczesnych formatach zmniejszają wagę transferu i przyspieszają ładowanie ważnych grafik.
Wydajność
Lepsza widoczność w wyszukiwarkach
Czystsza dostawa obrazów, lepsze metadane i szybsze strony wspierają lepsze sygnały indeksowania i wyższą jakość strony.
Wpływ na wyszukiwanie
Mniej chaosu przy publikacji
Uporządkowany proces obrazów zapobiega wysyłaniu ogromnych oryginałów, brakowi metadanych i niespójnym eksportom.
Jasność operacyjna
Jakie obrazy na stronie są zwykle potrzebne
Większość stron nie potrzebuje więcej typów obrazów, lecz odpowiednich ról, właściwie rozmiarowanych i opisanych. Myśl w kategoriach zadań, nie przypadkowych uploadów.
Hero image lub LCP
To główny obraz u góry strony. Często jest elementem Largest Contentful Paint, więc wymaga precyzyjnego rozmiaru i nie powinien być domyślnie ładowany leniwie.
Cel: pierwsze wrażenie i LCP
Obrazy w treści
Te obrazy wspierają treść artykułu. Powinny wyjaśniać zawartość, mieć sensowny tekst alternatywny i dobrze skalować się na desktopie i urządzeniach mobilnych.
Cel: wsparcie czytania
Karty, miniatury i obrazy hub
Te mniejsze obrazy pojawiają się na stronach kategorii, w modułach powiązanych artykułów i nawigacji. Powinny mieć mniejsze warianty niż główny obraz strony.
Cel: podglądy i nawigacja
Obraz Open Graph i podgląd społecznościowy
Ten obraz decyduje o wyglądzie strony podczas udostępniania w komunikatorach i mediach społecznościowych. To zasób metadanych, nie tylko kopia widocznego hero.
Cel: podglądy udostępnień i kliknięcia
Obraz w danych strukturalnych JSON-LD
Schemat artykułu i produktu może wskazywać główny obraz, aby wyszukiwarki rozumiały kluczowy wizualny element strony.
Cel: kompletność schematu i jasność obiektu
Formaty: wybierz odpowiedni typ pliku
Najlepszy format zależy od roli obrazu. Większość stron potrzebuje mieszanki, nie jednego uniwersalnego formatu.
| Format | Najlepsze do | Dlaczego to ważne |
|---|---|---|
| WebP | Standardowe obrazy na stronie, karty, podglądy i większość codziennych grafik | WebP to praktyczny wybór domyślny, łączący jakość, kompresję i łatwe ponowne użycie w codziennej publikacji. |
| AVIF | Wybrane duże zdjęcia hero i wartościowe grafiki, gdzie dodatkowa kompresja wymaga staranności | AVIF pozwala na mniejsze pliki, ale kodowanie jest wolniejsze i najlepiej sprawdza się jako selektywny krok optymalizacji, nie jako domyślny format. |
| JPEG | Zgodność wsteczna i pliki źródłowe przed nowoczesnym eksportem | JPEG nadal jest popularny jako format wejściowy, ale rzadko powinien być ostatecznym formatem ważnych obrazów na stronie. |
| PNG | Zrzuty ekranu, przezroczystość i elementy UI wymagające bezstratnych krawędzi | PNG jest przydatny do grafik interfejsu, ale zwykle zbyt ciężki dla zwykłych zdjęć. |
| SVG | Ikony, diagramy, logotypy i proste ilustracje | SVG skalują się czysto i często przewyższają formaty rastrowe w przypadku ostrych grafik liniowych. |
Używaj WebP jako codziennego formatu, a AVIF dla mniejszej grupy zdjęć, gdzie maksymalne oszczędności są ważne.
Dla standardowej ścieżki WebP przeczytaj przewodnik JPG do WebP . Do selektywnej kompresji obrazów hero użyj przewodnika JPEG do AVIF .
Rozmiary: obrazy responsywne, wymiary i stabilność układu
Wolne strony to nie tylko problem formatu. Często wysyłają jeden za duży obraz na wszystkie rozmiary ekranów. Responsywne rozmiary to naprawiają.
- Generuj wiele szerokości, aby telefony, tablety i komputery otrzymały odpowiedni plik.
- Ustaw szerokość i wysokość, by zarezerwować miejsce i zmniejszyć przesunięcia układu.
- Używaj mniejszych wariantów dla kart i powiązanych treści zamiast powielać pełny obraz hero wszędzie.
- Zachowaj duży oryginał tylko wtedy, gdy jest potrzebny do powiększania, pobierania lub lightboxa.
Przykład oznaczenia dostawy
Użyj małej, jasnej konfiguracji obrazów treści i zarezerwuj ładowanie natychmiastowe dla prawdziwego hero. Takie oznaczenie ułatwia zrozumienie zachowania przeglądarki i wyników Lighthouse.
<picture>
<source
type="image/avif"
srcset="/images/articles/hero-640.avif 640w,
/images/articles/hero-1024.avif 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/articles/hero-640.webp 640w,
/images/articles/hero-1024.webp 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/articles/hero-1024.jpg"
alt="Product dashboard preview"
width="1024"
height="576"
loading="lazy"
decoding="async" />
</picture>Priorytety dostawy: lazy loading, LCP i Core Web Vitals
Gdy formaty i rozmiary są odpowiednie, dostawa staje się kolejnym ważnym czynnikiem. Zasadą jest traktowanie obrazu nad linią załamania jako priorytetowego zasobu, a nie dodatku.
Zrób to dla hero image
Utrzymuj obraz hero skompresowany i dopasowany do układu. Ładuj go natychmiast, jeśli jest prawdopodobnym elementem Largest Contentful Paint.
Stosuj nowoczesne formaty, określone wymiary i unikaj nakładania wielu dużych banerów nad linią załadowania.
Co szkodzi dostawie
Leniwe ładowanie głównego obrazu hero, wysyłanie plików w rozmiarze desktop do telefonów oraz używanie zbyt dużych PNG dla zdjęć to wciąż częste błędy.
Te problemy osłabiają zarówno wyniki Lighthouse, jak i rzeczywiste doświadczenie użytkownika.
Kontekst: nazwy plików, tekst alternatywny i otaczający tekst
Optymalizacja obrazów to nie tylko rozmiar pliku. Wyszukiwarki i użytkownicy potrzebują też kontekstu, co przedstawia obraz i dlaczego jest na stronie.
- Używaj nazw plików opisujących temat, a nie nazw z aparatu czy tymczasowych.
- Pisz alt tylko gdy obraz wnosi znaczenie, nie jako miejsce na upychanie słów kluczowych.
- Dopasuj nagłówki, podpisy i tekst do tego, co faktycznie pokazuje obraz.
- Upewnij się, że rola obrazu wspiera temat strony, a nie jest przypadkowa.
Metadane: dlaczego obrazy Open Graph i JSON-LD są ważne
Strona może wyglądać dobrze w przeglądarce, ale słabo wypaść w wyszukiwaniu, jeśli zaniedba metadane obrazów. To łatwa do poprawy luka.
Obraz Open Graph
To decyduje o wyglądzie strony podczas udostępniania na zewnątrz. Silny obraz Open Graph poprawia postrzeganą jakość i klikalność w mediach społecznościowych i komunikatorach.
Właściwość obrazu w JSON-LD
Dane strukturalne dostarczają wyszukiwarkom czystszy pakiet treści. Dodanie odpowiedniego obrazu wzmacnia powiązanie między nagłówkiem, opisem a głównym elementem wizualnym.
Jeśli tworzysz aplikację w Blazor, połącz ten przewodnik z Przewodnikiem po komponencie metadanych Blazor aby tytuł strony, opis, link kanoniczny, obraz Open Graph i dane strukturalne były ze sobą zgodne.
Proces: uporządkowany sposób pracy z obrazami na stronie
- Określ rolę obrazu przed eksportem: hero, inline, karta, Open Graph lub obraz schematu.
- Wybierz format do zadania: WebP do codziennej pracy, AVIF do wybranych dużych zdjęć, SVG do wektorów, PNG tylko gdy ważna jest bezstratna przezroczystość.
- Eksportuj odpowiednie rozmiary do układu zamiast wysyłać wszędzie jeden za duży oryginał.
- Ustal priorytety dostawy, aby hero był zasobem priorytetowym, a obrazy pomocnicze pozostawały efektywne.
- Sprawdź metadane, tekst alternatywny i nazwy plików przed publikacją.
Jeśli wybierasz narzędzia do tego procesu, przewodnik po najlepszych konwerterach obrazów do sieci omawia wybór między narzędziami lokalnymi a online.
Lista kontrolna optymalizacji obrazów na stronie
- Każda ważna strona ma jasny plan ról obrazów przed rozpoczęciem eksportu.
- WebP obsługuje standardowe obrazy na stronie, chyba że uzasadniony jest silniejszy, selektywny format.
- Duże zdjęcia fotograficzne korzystają z AVIF tylko wtedy, gdy dodatkowe oszczędności są warte zachodu.
- Obrazy hero są dopasowane do układu i nie są ładowane leniwie, gdy są prawdopodobnym elementem LCP.
- Obrazy kart i hubów mają mniejsze warianty niż hero na stronie.
- Obrazy Open Graph służą do udostępnień i podglądów.
- Dane strukturalne zawierają odpowiedni główny obraz.
- Szerokość i wysokość są określone, by uniknąć przesunięć układu.
- Tekst alternatywny i nazwy plików jasno opisują rolę obrazu.
- Proces jest na tyle spójny, że te same błędy nie pojawiają się przy kolejnej publikacji.