Чому важливо вказувати розміри (width, height) для зображень?

Вказання атрибутів width і height для зображень важливе не лише для зовнішнього вигляду, а й для швидкості завантаження, стабільності верстки та коректного рендерингу сторінки. Ось що насправді відбувається, коли розміри є і коли їх немає.

---

#1. Без вказаних розмірів

Коли браузер бачить:

він не знає заздалегідь, скільки місця потрібно під картинку. Він починає завантажувати файл, а поки що не резервує місце в макеті.

В результаті:

• спочатку завантажується текст та інші елементи;
• потім, коли приходить зображення, сторінка «смикається» (зсувається вниз);
• користувач бачить візуальний стрибок (так званий layout shift).

---

#2. Із вказаними розмірами

Тепер браузер одразу знає, що картинка займе 400×300 пікселів, і резервує під неї місце заздалегідь, навіть якщо зображення ще не завантажено.

В результаті:

• сторінка не стрибає під час завантаження;
• текст, кнопки та елементи інтерфейсу залишаються на місці;
• браузер може швидше відрендерити макет.

---

#3. Чому це важливо для продуктивності

1. Менше перерахунків layout'у: браузер не перераховує позиціонування елементів під час кожного завантаження картинки.
2. Знижується CLS (Cumulative Layout Shift): це показник стабільності сторінки в Google PageSpeed. Чим менше зсувів контенту, тим краще SEO і користувацький досвід.
3. Браузер може завантажувати сторінку паралельно: знає, де буде зображення, і не чекає на його розміри.

---

#4. Розміри можна задати через CSS

Якщо верстка адаптивна, краще використовувати CSS:

або через HTML + CSS:

Так браузер все одно знає вихідні пропорції, а CSS адаптує їх під ширину екрана.

---

#5. Як браузер використовує ці дані

• Під час парсингу HTML він знає вихідне співвідношення сторін (width:height).
• Якщо зображення завантажується пізніше, він уже зарезервував блок потрібного розміру.
• Навіть при loading="lazy" контент не «стрибає».

---

#Підсумок:

---

Простими словами: Якщо не вказати width і height, сторінка буде «стрибати», поки картинки довантажуються. Якщо вказати, браузер заздалегідь залишить місце, і сайт виглядатиме стабільно, швидко і професійно.