Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чому важливо вказувати розміри (width, height) для зображень?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Атрибути `width` і `height`** у зображень задають браузеру розміри картинки заздалегідь, тому він резервує під неї місце в макеті ще до завантаження файлу. **Ключове:** без них сторінка «стрибає» (layout shift) під час довантаження картинок, що погіршує CLS (Cumulative Layout Shift) і користувацький досвід.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняВказання атрибутів `width` і `height` для зображень важливе не лише для зовнішнього вигляду, а й для **швидкості завантаження**, **стабільності верстки** та **коректного рендерингу сторінки**. Ось що насправді відбувається, коли розміри **є** і коли їх **немає**. --- ### 1. Без вказаних розмірів Коли браузер бачить: ```html <img src="photo.jpg" alt="Фото"> ``` він **не знає заздалегідь**, скільки місця потрібно під картинку. Він починає завантажувати файл, а поки що **не резервує місце в макеті**. В результаті: - спочатку завантажується текст та інші елементи; - потім, коли приходить зображення, сторінка «смикається» (зсувається вниз); - користувач бачить візуальний стрибок (так званий **layout shift**). --- ### 2. Із вказаними розмірами ```html <img src="photo.jpg" alt="Фото" width="400" height="300"> ``` Тепер браузер **одразу знає**, що картинка займе 400×300 пікселів, і **резервує під неї місце заздалегідь**, навіть якщо зображення ще не завантажено. В результаті: - сторінка **не стрибає під час завантаження**; - текст, кнопки та елементи інтерфейсу залишаються на місці; - браузер може швидше відрендерити макет. --- ### 3. Чому це важливо для продуктивності 1. **Менше перерахунків layout'у**: браузер не перераховує позиціонування елементів під час кожного завантаження картинки. 2. **Знижується CLS (Cumulative Layout Shift)**: це показник стабільності сторінки в Google PageSpeed. Чим менше зсувів контенту, тим краще SEO і користувацький досвід. 3. **Браузер може завантажувати сторінку паралельно**: знає, де буде зображення, і не чекає на його розміри. --- ### 4. Розміри можна задати через CSS Якщо верстка адаптивна, краще використовувати CSS: ```css img { width: 100%; height: auto; } ``` або через HTML + CSS: ```html <img src="photo.jpg" alt="Фото" width="800" height="600" style="max-width: 100%; height: auto;"> ``` Так браузер все одно знає вихідні пропорції, а CSS адаптує їх під ширину екрана. --- ### 5. Як браузер використовує ці дані - Під час парсингу HTML він знає вихідне **співвідношення сторін** (width:height). - Якщо зображення завантажується пізніше, він уже **зарезервував блок потрібного розміру**. - Навіть при `loading="lazy"` контент не «стрибає». --- ### Підсумок: | Причина | Навіщо потрібні розміри | |---|---| | Макет | Резервують місце під зображення | | Швидкість | Прискорюють перший рендер сторінки | | UX | Усувають візуальні «стрибки» | | SEO | Покращують показник CLS у Google PageSpeed | | Адаптивність | Дозволяють зберігати пропорції під час зміни розміру екрана | --- **Простими словами:** Якщо не вказати `width` і `height`, сторінка буде «стрибати», поки картинки довантажуються. Якщо вказати, браузер заздалегідь залишить місце, і сайт виглядатиме **стабільно, швидко і професійно.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.