Wymiary obrazów

Strony powinny informować przeglądarkę, ile miejsca zajmie każdy obraz, zanim obraz zakończy się ładować, aby tekst i pozostała zawartość nie przeskakiwały podczas wyświetlania obrazów. Silktide zgłasza widoczne obrazy, dla których nie zarezerwowano wcześniej miejsca.

Obraz rezerwuje miejsce, gdy deklaruje zarówno atrybuty width, jak i height, lub gdy obraz albo jeden z jego kontenerów ma wartość CSS aspect-ratio:

<!-- Brak zarezerwowanego miejsca: zawartość poniżej przeskakuje po załadowaniu -->
<img src="hero.jpg" alt="Zdjęcie zespołu">

<!-- Miejsce zarezerwowane za pomocą wymiarów naturalnych -->
<img src="hero.jpg" alt="Zdjęcie zespołu" width="1200" height="800">

<!-- Miejsce zarezerwowane za pomocą współczynnika proporcji -->
<img src="hero.jpg" alt="Zdjęcie zespołu" style="aspect-ratio: 3 / 2; width: 100%; height: auto;">

Dlaczego to jest ważne

Gdy przeglądarka nie zna z wyprzedzeniem rozmiaru obrazu, musi pobrać plik, zanim będzie mogła zakończyć układanie strony, a zawartość poniżej obrazu przesuwa się w dół podczas ładowania kolejnych obrazów. Jest to skumulowane przesunięcie układu (CLS), jeden z Podstawowych wskaźników internetowych Google i sygnał wpływający na ranking w wynikach wyszukiwania.

Przesunięcie układu jest też naprawdę irytujące: czytelnicy tracą miejsce podczas przewijania, a przyciski przesuwające się w chwili dotknięcia powodują przypadkowe kliknięcia.

Jak to naprawić

Dodaj atrybuty width i height odpowiadające naturalnym wymiarom obrazu. Przeglądarka użyje ich do zarezerwowania miejsca o prawidłowych proporcjach, nawet gdy CSS skaluje obraz responsywnie.
Możesz też ustawić w CSS aspect-ratio dla obrazu lub elementu opakowującego. Responsywne układy, które pozycjonują obraz bezwzględnie wewnątrz kontenera (jak robi to wiele komponentów obrazów), mogą rezerwować miejsce w ten sposób:

<!-- Element opakowujący rezerwuje miejsce; obraz je wypełnia -->
<div style="position: relative; aspect-ratio: 16 / 9;">
  <img src="hero.jpg" alt="Zdjęcie zespołu" style="position: absolute; inset: 0; width: 100%; height: 100%;">
</div>

Większość nowoczesnych frameworków i systemów zarządzania treścią może automatycznie generować wymiary; sprawdź ustawienia komponentu obrazu lub multimediów.

Jak Silktide to testuje

Testuje tylko strony kwalifikujące się do indeksowania przez wyszukiwarki.
Znajduje każdy widoczny element <img> na stronie, pomijając ukryte obrazy (takie jak piksele śledzące) oraz elementy wykluczone z kontroli.
Uznaje obraz za poprawny, jeśli ma atrybuty width i height.
W przeciwnym razie szuka wartości CSS aspect-ratio (innej niż auto) na samym obrazie, a następnie kolejno na każdym z jego elementów nadrzędnych. Style są wartościami obliczonymi przez rzeczywistą przeglądarkę renderującą stronę, więc uwzględniane są reguły zastosowane za pomocą klas i arkuszy stylów.
Oznacza każdy pozostały obraz osobno, aby można było go wyróżnić na stronie.

Ta kontrola jest wyświetlana w sekcji Szybkość jako porada i nie zmienia wyniku Szybkości, który pochodzi z wyniku wydajności Lighthouse. Lighthouse mierzy przesunięcie układu na testowanych stronach; ta kontrola wykrywa obrazy, które je powodują, na każdej stronie.

Rozwiązywanie problemów

Mój obraz ma stały rozmiar w CSS i nadal jest oznaczany

Arkusz stylów, który nadaje obrazowi stałą szerokość i wysokość, również zapobiega jego przesuwaniu się, ale Silktide rozpoznaje tylko atrybuty width i height lub aspect-ratio. Dlatego jest to ostrzeżenie, a nie błąd. Jeśli obraz nie może się przesunąć, wynik.