Помилка підключення. Спробуйте ще раз.

Перейти до вмісту
SEO Tools
Довідка та документація
Швидкість Середній вплив Просте 5–15 хв

Розміри зображень (width/height)

Без розмірів зображення макет стрибає (CLS).

Що це

Коли в <img> не вказані width та height, браузер до завантаження не знає, скільки місця займе зображення — і після його надходження контент «стрибає». Це вимірює метрика CLS (Cumulative Layout Shift).

Чому це важливо

Стрибання макета дратує (користувач клікає на щось інше, ніж хотів), і Google штрафує це через CLS у Core Web Vitals.

Як це зробити

  1. 1Вказуйте width та height у всіх <img> (браузер обчислить із них співвідношення сторін).
  2. 2За потреби зарезервуйте місце через aspect-ratio у CSS.
  3. 3Те саме стосується вбудувань та реклами — зарезервуйте їм простір.

Приклад

Погано
<img src="foto.webp" alt="...">
Правильно
<img src="foto.webp" alt="..." width="800" height="600">

Висновок

Додати розміри зображень — п'ятихвилинна справа з прямим впливом на CLS — одну з Core Web Vitals. Поєднуйте з lazy loading та сучасними форматами. Резервуйте місце й вбудуванням та рекламі, щоб нічого не стрибало.

Повʼязані теми