Гибкие изображения, медиа и тач-цели

Адаптивный лейаут бесполезен, если в него вставить картинку фиксированной ширины 1200px. Медиа тоже должно быть резиновым — и быстрым.

«Самый быстрый запрос — тот, который не отправлен. Самая лёгкая картинка — та, которую не загрузили раньше времени».

Картинки — главный «вес» страницы. Адаптивность медиа решает две задачи: не вылезать за контейнер и не грузить лишнего. Базовое правило — резиновая картинка:

img {
  max-width: 100%;   /* не шире контейнера */
  height: auto;      /* пропорции сохранены */
  display: block;
}

Дальше — три приёма производительности:

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w"
  sizes="(max-width: 600px) 100vw, 50vw"
  loading="lazy"
  width="800" height="600"
  alt="Описание для скринридера">

Тач-цели: дизайн под палец

Курсор точен до пикселя, палец — нет. Кликабельные элементы на мобильном должны быть не меньше 44×44px (рекомендация Apple) с воздухом между ними. Крошечные ссылки в ряд — кошмар для тача.

  ТАЧ-ЦЕЛИ
  --------
  ПЛОХО (мелко, слиплись):   ХОРОШО (44px, с зазором):
  [x][x][x][x]               [  X  ]  [  X  ]  [  X  ]
  палец промахивается        палец попадает легко

Разбор глубже: медиа как главный источник веса и сдвигов

Картинки — обычно самая тяжёлая часть страницы, и именно они чаще всего убивают скорость. Разница между бездумно вставленным JPEG на 2 МБ и грамотно подготовленным WebP на 200 КБ — это разница между «грузится мгновенно» и «пользователь ушёл, не дождавшись». Поэтому работа с медиа — это не довесок к дизайну, а его часть: дизайнер, отдающий в макет несжатые мегабайты, проектирует медленный сайт, как бы красив он ни был на скриншоте. Современные форматы (WebP, AVIF) и атрибут srcset позволяют отдавать каждому устройству ровно ту версию картинки, что ему нужна, — не больше.

Отдельная коварная проблема — сдвиг макета (layout shift). Если у картинки не заданы пропорции, браузер до её загрузки не знает, сколько места она займёт, и схлопывает её в ноль. Когда картинка догружается, она «распирает» контент, и весь текст ниже резко прыгает вниз — раздражающий эффект, особенно если пользователь в этот момент уже целился в ссылку. Лечится это копеечно: задать width и height или aspect-ratio, чтобы браузер зарезервировал место заранее. Это одна из тех мелочей, которые невидимы в идеальных условиях, но больно бьют по ощущению качества на реальном медленном соединении.

Тач-цели — это место, где дизайн встречается с физиологией. Курсор мыши точен до пикселя, и на десктопе можно делать мелкие плотные ссылки. Палец — мягкий и широкий, и попасть им в цель меньше примерно 44px трудно, а если цели ещё и слиплись — пользователь постоянно промахивается и нажимает не то. Поэтому на мобильном кликабельные элементы увеличивают и разносят зазорами. Это не «потеря места», а уважение к тому, как устроена рука. Заодно увеличенные цели помогают людям с моторными нарушениями, так что это ещё и доступность.

Отдельно стоит сказать про атрибут alt — текстовое описание картинки. Для незрячих пользователей alt — единственный способ узнать, что изображено; скринридер зачитывает его вслух. Поисковики тоже читают alt, понимая содержание картинки. Декоративным изображениям дают пустой alt (alt=""), чтобы скринридер их пропустил и не зачитывал лишнее. А содержательным — короткое осмысленное описание, передающее суть, а не «image1.jpg». Это копеечная по усилиям вещь, которую новички систематически пропускают, а она напрямую определяет, доступна ли картинка людям, которые её не видят, и понятна ли она машинам.

Как делают ПЛОХО

Вставляют тяжёлый JPEG на 2 МБ без lazy loading, картинка вылезает за контейнер. Не задают width/height — при загрузке макет «прыгает». Кнопки по 20px впритык друг к другу.

Как делают ХОРОШО

WebP/AVIF, srcset под разные экраны, lazy loading для всего «ниже сгиба», заданные размеры или aspect-ratio против сдвига. Тач-цели ≥ 44px с зазорами. Всегда осмысленный alt.

Чек-лист

• img { max-width: 100%; height: auto }.
• Современные форматы (WebP/AVIF) и srcset.
• loading="lazy" для картинок ниже первого экрана.
• Заданы width/height или aspect-ratio — нет сдвига макета.
• Тач-цели ≥ 44px с зазорами; у картинок есть alt.

Итог. Резиновое медиа + современные форматы + lazy loading дают быструю адаптивную страницу. Тач-цели по 44px делают её удобной под палец.