Адаптивные изображения

Фотография шириной 800 пикселей не помещается на экран телефона, а огромный файл для маленького экрана — лишний трафик. Адаптивные изображения решают обе задачи: CSS подгоняет картинку под место, а HTML позволяет браузеру выбрать подходящий файл.

Резиновая картинка

По умолчанию <img> показывается в своём настоящем размере и может вылезти за край. Два свойства делают картинку резиновой — сжимающейся вместе с родителем:

<style>
  img { max-width: 100%; height: auto; }
</style>
 
<img src="/media/photo-800x500.jpg" alt="Река в горах" width="800" height="500">

max-width: 100% запрещает быть шире родителя, height: auto сохраняет пропорции. Атрибуты width и height всё равно стоит указывать: по ним браузер заранее оставляет место, и текст не прыгает, пока картинка грузится.

Пропорции: aspect-ratio

Свойство aspect-ratio задаёт соотношение сторон блока: ширина растягивается, а высота считается сама. Так готовят место под видео или превью:

<style>
  .video { aspect-ratio: 16 / 9; max-width: 320px; background: black; color: white; display: grid; place-items: center; }
</style>
 
<div class="video">16 : 9</div>

Заполнение: object-fit

Когда картинке задают и ширину, и высоту, она искажается. object-fit говорит, как вписать её в рамку:

<style>
  .row { display: flex; gap: 8px; }
  .row img { width: 140px; height: 140px; border: 2px solid gray; }
  .cover { object-fit: cover; }
  .contain { object-fit: contain; }
</style>
 
<div class="row">
  <img src="/media/photo-400x250.jpg" alt="Растянута">
  <img class="cover" src="/media/photo-400x250.jpg" alt="cover">
  <img class="contain" src="/media/photo-400x250.jpg" alt="contain">
</div>

Выбор файла: srcset и sizes

Атрибут srcset перечисляет несколько версий одной картинки с их шириной — 400w значит «файл шириной 400 пикселей». Атрибут sizes подсказывает, какую ширину картинка займёт на странице. Браузер сам скачает самый подходящий файл:

<style>
  img { max-width: 100%; height: auto; }
</style>
 
<img
  src="/media/photo-800x500.jpg"
  srcset="/media/photo-400x250.jpg 400w,
          /media/photo-800x500.jpg 800w"
  sizes="(max-width: 500px) 100vw, 500px"
  alt="Река в горах" width="800" height="500">

Запись sizes читается так: на экране до 500 пикселей картинка во всю ширину окна, иначе — 500 пикселей. Как картинки влияют на скорость загрузки, разобрано в уроке «Скорость страницы».

Элемент picture

<picture> нужен, когда на разных экранах показывают разные картинки — например, широкий кадр на компьютере и квадратный на телефоне. Браузер берёт первый <source>, чьё условие media подходит, а <img> служит запасным вариантом:

<picture>
  <source media="(min-width: 600px)" srcset="/media/photo-600x200.jpg">
  <img src="/media/photo-200x200.jpg" alt="Река в горах">
</picture>

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

Частая ошибка

Задать картинке width: 100% и фиксированную высоту — и получить сплющенное фото:

<style>
  .bad { width: 100%; height: 120px; }
  .good { width: 100%; height: 120px; object-fit: cover; }
</style>
 
<img class="bad" src="/media/photo-800x500.jpg" alt="Сплющено">
<img class="good" src="/media/photo-800x500.jpg" alt="Обрезано аккуратно">

Либо оставляйте height: auto, либо добавляйте object-fit: cover.