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

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

К счастью, CSS предоставляет инструменты, позволяющие предотвратить это.

Ограничьте движения ваших изображений

В таблице стилей можно использовать max-inline-size , чтобы указать, что изображения никогда не могут отображаться в размере, превышающем размер содержащего их элемента.

img {
  max-inline-size: 100%;
  block-size: auto;
}

Это же правило можно применить и к другим видам встроенного контента, например, к видео и iframe.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

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

Добавление значения параметра block-size равного auto , означает, что браузер сохранит соотношение сторон ваших изображений при их изменении размера.

Иногда размеры изображения задаются системой управления контентом (CMS) или другой системой доставки контента. Если ваш дизайн требует иного соотношения сторон, отличного от значения по умолчанию в CMS, вы можете использовать свойство aspect-ratio , чтобы сохранить дизайн вашего сайта:

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

К сожалению, это часто означает, что браузеру приходится сжимать или растягивать изображение, чтобы оно поместилось в нужном месте.

Чтобы предотвратить сжатие и растяжение, используйте свойство object-fit .

Значение object-fit contain указывает браузеру сохранять пропорции изображения, оставляя при необходимости пустое пространство вокруг изображения.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

Значение параметра object-fit cover указывает браузеру сохранять соотношение сторон изображения, обрезая его при необходимости.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

Вы можете изменить положение фрагмента изображения, используя свойство `object-position` . Это регулирует фокус фрагмента, позволяя убедиться, что наиболее важная часть изображения остается видимой.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

Отправьте свои изображения

Эти правила CSS указывают браузеру, как вы хотите, чтобы изображения отображались. Вы также можете указать в HTML-коде, как браузер должен обрабатывать эти изображения.

Советы по выбору размера

Если вам известны размеры изображения, всегда указывайте атрибуты width и height . Даже если изображение отображается в другом размере из-за правила max-inline-size , браузер все равно знает соотношение ширины и высоты и может выделить нужное количество места. Это предотвратит «скачки» остального контента при загрузке изображения.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

Подсказки по загрузке

Используйте атрибут loading , чтобы указать браузеру, следует ли откладывать загрузку изображения до тех пор, пока оно не окажется в видимой области или рядом с ней. Для изображений, расположенных ниже видимой области, используйте значение ` lazy . Браузер не будет загружать отложенные изображения, пока пользователь не прокрутит страницу достаточно далеко вниз, чтобы изображение почти стало видимым. Если пользователь не прокрутит страницу, изображение никогда не загрузится.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

Для главного изображения, расположенного в верхней части страницы, не используйте loading . Если ваш сайт автоматически применяет атрибут loading="lazy" , вы обычно можете установить для loading значение по умолчанию eager , чтобы предотвратить отложенную загрузку изображений:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Получить приоритет

Для важных изображений, таких как изображение LCP , можно дополнительно установить приоритет загрузки, используя параметр Fetch Priority , установив атрибут fetchpriority в high :

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

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

Однако, когда вы просите браузер отдать приоритет загрузке одного ресурса, например изображения, браузер должен снизить приоритет другого ресурса, такого как скрипт или файл шрифта. Устанавливайте параметр fetchpriority="high" для изображения только в том случае, если это действительно необходимо.

Советы по предварительной загрузке

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

Вы можете использовать предварительную загрузку, чтобы браузер заранее загрузил эти важные изображения. Для действительно важных изображений вы можете объединить эту предварительную загрузку с атрибутом fetchpriority :

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

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

Некоторые браузеры поддерживают предварительную загрузку imagesizes изображений на основе атрибутов srcset и imagesrcset . Например:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

Исключив резервный вариант с атрибутом href , вы можете быть уверены, что браузеры без поддержки srcset всё равно будут предварительно загружать правильное изображение.

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

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

Благодаря объявлению max-inline-size: 100% ваши изображения не могут выйти за пределы своих контейнеров. Однако, если у пользователя небольшой экран и низкая скорость сети, заставлять его загружать изображения того же размера, что и пользователи с большими экранами, приводит к нерациональному расходованию трафика.

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

дескриптор ширины

Вы можете определить srcset используя список значений, разделенных запятыми. Каждое значение представляет собой URL-адрес изображения, за которым следует пробел, а затем некоторые метаданные об изображении, называемые дескриптором .

В этом примере метаданные описывают ширину каждого изображения, используя единицу измерения w . Одна w — это ширина одного пикселя.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

Атрибут srcset дополняет атрибут src , а не заменяет его. Необходимо, чтобы атрибут src по-прежнему был корректным, но браузер может заменить его значение одним из вариантов, перечисленных в srcset . Для экономии трафика браузер загружает увеличенное изображение только в случае необходимости.

Размеры

Если вы используете дескриптор ширины, вам также необходимо использовать атрибут sizes , чтобы предоставить браузеру дополнительную информацию. Это указывает браузеру, какого размера вы ожидаете увидеть изображение при различных условиях. Эти условия задаются в медиа-запросе.

Атрибут sizes принимает список медиа-запросов и ширины изображений, разделенных запятыми.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

В этом примере вы указываете браузеру, что в области просмотра с шириной более 66em изображение должно отображаться не шире одной трети экрана (например, внутри трехколоночного макета).

При ширине области просмотра от 44em до 66em отображайте изображение на половине ширины экрана (как в двухколоночном макете).

Для изображений шириной менее 44em отображайте их на всю ширину экрана.

Это означает, что самое большое изображение не обязательно будет использоваться для самого широкого экрана. Широкое окно браузера, способное отображать многоколоночный макет, использует изображение, помещающееся в одну колонку, которое может быть меньше, чем изображение, используемое для одноколоночного макета на более узком экране.

Дескриптор плотности пикселей

Также можно использовать дескрипторы для предоставления альтернативной версии изображений для отображения на дисплеях с высокой плотностью пикселей, чтобы изображения оставались четкими при более высоком разрешении, которое они обеспечивают.

Используйте дескриптор плотности для описания плотности пикселей изображения относительно изображения в атрибуте src . Дескриптор плотности представляет собой число, за которым следует буква x, например, 1x или 2x .

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

Если размер файла small-image.png составляет 300 на 200 пикселей, а medium-image.png — 600 на 400 пикселей, то после medium-image.png в списке srcset может быть указано 2x .

Необязательно использовать целые числа. Если другой вариант изображения имеет размер 450 на 300 пикселей, его можно описать с помощью 1.5x .

Презентационные изображения

Изображения в HTML являются контентом. Именно поэтому для программ чтения с экрана и поисковых систем используется атрибут alt с описанием изображения.

Если вы вставляете декоративное изображение без какого-либо содержательного контента, вы можете использовать пустой атрибут alt .

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

Атрибут alt всегда должен быть указан, даже если он пустой. Пустой атрибут alt сообщает программе чтения с экрана, что изображение является презентационным. Отсутствие атрибута alt не предоставляет этой информации.

В идеале, презентационные или декоративные изображения следует включать с помощью CSS, а не HTML. HTML используется для структуры, а CSS — для оформления.

Фоновые изображения

Используйте свойство background-image в CSS для загрузки презентационных изображений.

element {
  background-image: url(flourish.png);
}

С помощью функции image-set для background-image можно указать несколько вариантов изображений.

Функция image-set в CSS работает во многом аналогично атрибуту ` srcset в HTML. Она предоставляет список изображений с описанием плотности пикселей для каждого из них.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

Браузер выбирает наиболее подходящее изображение в зависимости от плотности пикселей устройства.

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

• Для каждого изображения зарезервировано необходимое место.
• Как определить, сколько размеров вам нужно.
• Определение того, является ли изображение содержательным или декоративным.

Стоит потратить время на правильный подбор изображений. Неудачная стратегия использования изображений может раздражать и расстраивать пользователей. Хорошая стратегия использования изображений делает ваш сайт привлекательным и четким независимо от устройства пользователя или скорости его интернет-соединения.

В вашем арсенале есть еще один HTML-элемент, который позволит вам лучше контролировать изображения: элемент picture ` .

Проверьте свое понимание

Проверьте свои знания об изображениях.