Веб-разработка: как задать width и height изображениям, чтобы уменьшить сдвиги макета при загрузке

Чтобы уменьшить сдвиги макета, укажите изображениям атрибуты width и height с их исходными размерами, а в CSS задайте адаптивное масштабирование. Браузер заранее рассчитает пропорции и зарезервирует место до загрузки файла. Проверьте также изображения, которые добавляются скриптами, и оцените результат в инструментах браузера.

Как заранее зарезервировать место под изображения

• Указывайте в HTML реальные исходные ширину и высоту файла, а не размер отображения на странице.
• Для адаптивного изображения используйте в CSS max-width: 100%; height: auto.
• Для изображений, подставляемых скриптами, резервируйте контейнер с заданными пропорциями.
• Не откладывайте загрузку изображения, которое видно сразу при открытии страницы.

Почему изображения сдвигают контент при загрузке

Пока файл изображения не загружен, браузер может не знать его пропорции и высоту. Когда изображение появляется, оно занимает место и перемещает расположенный ниже текст или другие элементы. Такие неожиданные перемещения влияют на CLS - показатель стабильности макета.

Этот способ подходит для обычных контентных изображений, карточек, иллюстраций и изображений товара. Он не заменяет настройку размеров контейнера, если картинка меняется динамически или кадрируется через CSS.

Не задавайте произвольные размеры, чтобы просто устранить сдвиг: это может исказить изображение или изменить его кадрирование. Если пропорции файла неизвестны, сначала проверьте исходный ресурс или предусмотрите для блока устойчивое соотношение сторон.

Как указать width и height по исходным размерам файла

Понадобятся доступ к HTML-шаблону или компоненту, в котором выводится изображение, и исходные размеры файла. Их можно посмотреть в свойствах файла, в редакторе изображений или в панели Network браузерных инструментов после загрузки ресурса.

Значения атрибутов задают в пикселях без единиц измерения. Например, если исходный файл имеет ширину 1200 и высоту 800 пикселей, разметка будет такой:

<img src="/images/article.jpg" width="1200" height="800" alt="Описание изображения">

Атрибуты сообщают браузеру соотношение сторон; они не требуют отображать изображение именно в исходном размере. Адаптивную ширину и фактическое отображение задают стилями.

Как сохранить пропорции при адаптивном масштабировании

Перед изменениями учтите возможные ограничения:

• Не подставляйте размеры другого варианта файла: отличающиеся пропорции могут привести к неверному резервированию места.
• Если изображение кадрируется, проверьте, что контейнер и правила object-fit соответствуют дизайну.
• Для контента, который вставляется после загрузки страницы, размеров только в HTML недостаточно - потребуется резервировать место для контейнера.
• Не добавляйте атрибут loading="lazy" изображению, которое должно быть видно сразу при открытии страницы.

1. Проверьте пропорции исходного файла.
   Найдите ширину и высоту именно того изображения, которое будет загружаться в браузере. Если для экранов используются разные файлы, проверьте размеры каждого варианта.
2. Укажите размеры в HTML.
   Добавьте к тегу <img> атрибуты width и height с исходными значениями. Не заменяйте их размерами изображения на конкретном экране.
3. Добавьте адаптивные правила CSS.
   Ограничьте ширину изображения шириной родительского блока и сохраните автоматическую высоту.
   • Для обычного масштабирования: img { max-width: 100%; height: auto; }.
   • Если изображение должно заполнять блок с обрезкой, задайте размеры блоку и используйте object-fit: cover.
4. Проверьте разные состояния страницы.
   Откройте страницу на узком и широком экране, а также проверьте медленную загрузку или временную недоступность изображения. Убедитесь, что текст не перемещается после его появления.

Что проверить у фоновых, декоративных и динамически подставляемых изображений

Атрибуты width и height применяются к элементу <img>. Фоновое изображение в CSS и картинка, которую скрипт добавляет позднее, требуют отдельной проверки зарезервированного пространства.

• Контейнер фонового изображения имеет размеры или устойчивое соотношение сторон до загрузки фона.
• Для декоративного фона содержимое не зависит от того, успел ли загрузиться файл.
• Если скрипт вставляет тег <img>, он добавляет размеры либо изображение помещается в контейнер с заданными пропорциями.
• При смене изображения на другое учитываются пропорции нового файла.
• Пустое состояние галереи, карточки или слайдера сохраняет ту же высоту, что и состояние с изображением.
• Изменение размера окна не приводит к скачку макета при переключении источника изображения.

Как сочетать размеры в HTML с lazy loading и CSS

Атрибуты размеров, отложенная загрузка и стили решают разные задачи. Ошибки в их сочетании могут оставить сдвиги или ухудшить загрузку видимой части страницы.

• Не указывайте width и height, не соответствующие пропорциям источника.
• Не задавайте изображению одновременно фиксированную ширину и высоту в CSS без необходимости: это может растянуть файл.
• Не полагайтесь только на height: auto, если браузеру неизвестны размеры изображения до загрузки.
• Не применяйте loading="lazy" к главному изображению, которое находится в первоначально видимой области страницы.
• Не скрывайте проблему сдвига фиктивной минимальной высотой, если реальная высота блока зависит от адаптивного содержимого.
• Не забывайте задавать размеры всем изображениям внутри повторяющихся компонентов, например карточек и галерей.

Такая настройка помогает в работе над запросами "как уменьшить CLS на сайте", "оптимизация скорости загрузки сайта" и "Core Web Vitals оптимизация сайта". Она также полезна, когда нужно понять, как ускорить загрузку изображений на сайте: резервирование места снижает сдвиги, но само по себе не уменьшает размер файлов.

Как найти оставшиеся сдвиги макета в браузере

1. Проверьте запись загрузки в панели Performance. В DevTools можно записать загрузку страницы и изучить события сдвига макета, чтобы найти перемещённые элементы.
2. Используйте отчёт Lighthouse. Он помогает обнаружить проблемы производительности при проверке страницы, но результат следует сверить с поведением сайта в реальном сценарии.
3. Отключите кэш или замедлите сеть при тестировании. Это помогает заметить сдвиги, которые незаметны при быстрой загрузке ресурсов с локального кэша.
4. Проверьте реальных пользователей. Если задача связана с практической оценкой Core Web Vitals, сопоставьте лабораторную проверку с полевыми данными, доступными для сайта.

Если после проверки остаются сдвиги, исследуйте не только изображения, но и другие элементы, которые появляются позднее или меняют размер. Для комплексной диагностики могут понадобиться услуги оптимизации сайта для Google PageSpeed, особенно если причины связаны одновременно с загрузкой ресурсов, шрифтами и динамическими блоками.

Нюансы размеров изображений, которые часто упускают

Можно ли указывать размеры, отличающиеся от исходных?

Атрибуты должны отражать пропорции загружаемого изображения. Масштаб отображения задавайте в CSS; неверные пропорции в атрибутах могут привести к неправильному резервированию места.

Нужно ли указывать width и height, если изображение адаптивное?

Да. Атрибуты дают браузеру информацию о пропорциях, а CSS позволяет изображению уменьшаться под ширину контейнера.

Что делать, если один тег использует несколько файлов через picture и srcset?

Проверьте пропорции всех вариантов источника. Если они различаются, задайте контейнеру подходящее соотношение сторон или используйте варианты с одинаковыми пропорциями.

Нужно ли задавать размеры фоновому изображению?

У CSS-фона нет атрибутов width и height. Задайте размеры самого блока или его соотношение сторон, чтобы место было зарезервировано до появления фона.

Достаточно ли атрибутов размеров для изображения, которое добавляет JavaScript?

Нет, если до выполнения скрипта контейнер не занимает нужное место. Укажите размеры при создании элемента либо заранее задайте контейнеру устойчивые пропорции.

Уменьшают ли width и height время загрузки файла?

Нет, эти атрибуты помогают браузеру заранее рассчитать место. Для более быстрой загрузки отдельно оптимизируйте формат и размер файла и выбирайте подходящий источник для экрана.

Автор: Сергей Макаров.