Optymalizuj obrazy na stronie: sprawdź stronę przed publikacją

Sprawdź najpierw

Zacznij od tego, co pobiera przeglądarka

Pliki projektowe i foldery mediów nie pokazują, co faktycznie otrzymują użytkownicy. Przeglądarka pokazuje, który URL obrazu się ładuje, jak duży jest widoczny, czy strona rezerwuje miejsce i czy duży plik jest używany tam, gdzie wystarczyłby mniejszy.

Plan obrazów

Zaplanuj każdy ważny obraz przed konwersją

Plan obrazów oddziela ten przewodnik od artykułów o konwerterach. Określa, czego potrzebuje każdy obszar obrazu: rozmiaru, kolejności ładowania, zapasowego pliku, roli metadanych i końcowej weryfikacji, że strona używa właściwego pliku.

Gdy plan wskazuje na potrzebę nowych wersji plików, użyj przewodnik po konwersji obrazów do wyboru kolejnego kroku. Użyj Przewodnik JPG do WebP do standardowej pracy z WebP, a przewodnik AVIF tylko dla dużych zdjęć wymagających dodatkowej optymalizacji.

Rozmiary obrazów

Ustaw jasne rozmiary dla każdego obszaru obrazu

Responsywne obrazy działają tylko, gdy HTML odpowiada układowi. Zmierz obszar, wybierz kilka przydatnych szerokości, zarezerwuj proporcje i unikaj wysyłania dużego oryginału tylko dlatego, że istnieje.

Prosta kontrola: jeśli karta 360 px pobiera plik 2400 px, kompresja nie jest głównym problemem. Strona potrzebuje mniejszej wersji obrazu lub HTML wskazuje zły plik.

Kolejność ładowania

Spraw, by pierwszy obraz ładował się celowo

Obraz kształtujący pierwszy ekran wymaga innych zasad niż obrazy niżej na stronie. Znajdź prawdopodobny obraz LCP, nie ładuj go leniwie przez pomyłkę i trzymaj niższe obrazy w ukryciu, aż będą potrzebne.

1. 1

   Nazwij obraz LCP

   Jeśli pierwszy znaczący obraz prawdopodobnie stanie się Largest Contentful Paint, nie ładuj go leniwie przez pomyłkę.

2. 2

   Nie wyróżniaj obrazów poniżej

   Obrazy poniżej pierwszego widoku powinny zwykle korzystać z leniwego ładowania i asynchronicznego dekodowania.

3. 3

   Sprawdź tła CSS

   Przycięte tło może nadal pobierać duży plik. Użyj pliku o odpowiednim rozmiarze dla widocznego obszaru.

4. 4

   Sprawdź powtarzające się żądania

   Mały obrazek na karcie staje się kosztowny, gdy ten sam zbyt duży plik powtarza się wielokrotnie.

HTML

Użyj responsywnego HTML dla zmierzonego obszaru

Dla ważnych obrazów jasno określ wybór przeglądarki. Poniższy przykład pokazuje opcje szerokości, rozmiary, stałe wymiary i zapasowy plik. Zmieniaj zachowanie ładowania według obszaru, nie nawyku.

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="Zrzut ekranu pulpitu pokazujący proces przesyłania"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

Wyszukiwanie i udostępnianie

Spraw, by obrazy, tekst alternatywny i metadane opowiadały jedną historię

SEO obrazów to nie tylko dodawanie słów kluczowych. Widoczny obraz, tekst w pobliżu, pomocny tekst alternatywny, tagi Open Graph i linki JSON-LD powinny jasno opisywać tę samą stronę. Obrazy dekoracyjne powinny pozostać dekoracyjne.

Gdy kontrola wykryje słabe podglądy społecznościowe, kontynuuj z Otwórz przewodnik po obrazach Graph. Gdy problemem są schemat i meta tagi, użyj Przewodnik po metadanych Blazor, aby zachować spójność JSON-LD i metadanych strony.

Kroki

Proste sprawdzenie obrazów na każdej stronie

1. 1

   Otwórz prawdziwą stronę

   Zacznij od aktualnego URL, nie od folderu zasobów. Zapisz obrazy, które faktycznie się ładują.

2. 2

   Stwórz plan obrazów

   Dla każdego ważnego obrazu zapisz docelową szerokość, proporcje, kolejność ładowania, zapasowy plik i rolę metadanych.

3. 3

   Konwertuj tylko zmienione pliki

   Używaj narzędzi konwersji tylko dla plików znalezionych podczas kontroli, zamiast ponownego eksportu całego folderu mediów.

4. 4

   Aktualizuj HTML i metadane

   Wskaż w srcset, sizes, wymiarach, Open Graph i linkach JSON-LD przygotowane pliki.

5. 5

   Zweryfikuj wynik przeglądarki

   Sprawdź stronę, żądania sieci, metadane społecznościowe, dane strukturalne i układ mobilny.

6. 6

   Zachowaj regułę na przyszłość

   Dokumentuj decyzje dotyczące obrazów, aby przyszłe aktualizacje nie zaczynały się od zgadywania.

Lista kontrolna

Lista kontrolna obrazów przed publikacją

Użyj tej listy przed publikacją artykułu, strony docelowej lub produktu. Wykrywa problemy, które sama konwersja może pominąć.