Атрибуты задают пропорцию, CSS — отображение

Добавьте размеры без потери адаптивности

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

Процесс: измерить изображение, добавить width и height, сохранить адаптивный CSS и проверить
Естественные размеры → HTML-атрибуты → responsive CSS → тест.

Сообщение разработчику

«Для каждого повторяющегося img получите естественные размеры из файла или медиатеки и выводите оба числовых атрибута width/height. Сохраните адаптивность через max-width:100%; height:auto. Для picture проверьте пропорции всех source, для art direction зарезервируйте корректный контейнер. Покажите тест без кеша и с заблокированными изображениями на desktop/mobile».

Что подготовить

  • резервную копию шаблонов и настройки медиатеки;
  • примеры каждого типа изображения и его исходный файл;
  • контрольные страницы на двух ширинах экрана;
  • текущие CSS-правила для img, контейнера и picture.

Пошаговое исправление

  1. Найдите img без одного или обоих атрибутов в отрисованном HTML.
  2. Получите пиксельные размеры исходника или выбранного основного варианта из медиатеки.
  3. Добавьте числовые атрибуты без px; их отношение должно совпадать с изображением.
  4. Добавьте или сохраните CSS max-width:100% и height:auto, если картинка должна уменьшаться.
  5. Для srcset с width descriptors проверьте sizes; варианты одной композиции должны иметь одинаковое соотношение.
  6. Для разных кадрирований в picture настройте резервирование контейнера по брейкпоинтам и object-fit при необходимости.
  7. Исправьте общий компонент CMS, очистите кеш и проверьте новые материалы.
  8. Заблокируйте загрузку изображений и убедитесь, что макет сохраняет место без горизонтальной прокрутки.

Правильный адаптивный пример

<img src="photo-1200.jpg"
     srcset="photo-600.jpg 600w, photo-1200.jpg 1200w"
     sizes="(max-width: 760px) 100vw, 760px"
     width="1200" height="800"
     alt="Понятное описание изображения">
img { max-width: 100%; height: auto; }

Атрибуты сообщают отношение 3:2; реальная ширина может быть 760px, 100% контейнера или меньше.

Риски, откат и отдельные работы

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

После изменения используйте инструкцию проверки. Форматы, сжатие, lazy loading, LCP, фоновые изображения и сторонние виджеты — отдельные задачи. При сложном генераторе можно заказать исправление.