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

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

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

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

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

Поддержка браузера

• 57
• 79
• 41
• 12.1

Источник

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

Примечание. Если хотите, вы можете использовать max-width вместо max-inline-size , но помните, что полезно привыкнуть мыслить с точки зрения логических свойств .

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

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

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

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

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

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

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

Чтобы этого не произошло, используйте свойство object-fit .

Поддержка браузера

• 32
• 79
• 36
• 10

Источник

Значение object-fit contain , сообщает браузеру, что нужно сохранить соотношение сторон изображения, даже если это означает, что сверху и снизу останется пустое пространство.

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

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

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

Одно и то же изображение с двумя разными значениями параметра `object-fit`. Первый имеет значение «contain», соответствующее объекту. Второй имеет значение «подгонки объекта» как «обложка».

Если равномерная обрезка сверху и снизу является проблемой, используйте свойство CSS object-position, чтобы настроить фокус обрезки.

Поддержка браузера

• 32
• 79
• 36
• 10

Источник

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

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: 100% ), браузер все равно знает соотношение ширины и высоты и может выделить нужное количество места. Это предотвратит скачок другого контента при загрузке изображения.

<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" , вы часто можете установить атрибут 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">

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

Предварительная загрузка адаптивных изображений на основе srcset (о котором речь пойдет ниже) через атрибуты imagesrcset и imagesizes является более сложной и поддерживается в некоторых браузерах , но не во всех:

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

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

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

Декодирование изображения

Также есть атрибут decoding , который вы можете добавить к элементам img . Вы можете сообщить браузеру, что изображение можно декодировать асинхронно. Затем браузер может установить приоритет обработки другого контента.

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

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

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

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

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

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

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

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

Если вы создаете несколько версий одного и того же изображения разных размеров, вы можете сообщить об этом браузеру с помощью атрибута 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 . Вместо этого атрибут srcset дополняет атрибут src . Вам по-прежнему необходимо иметь действительный атрибут src , но теперь браузер может заменить его значение одним из параметров, перечисленных в атрибуте srcset .

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

Размеры

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

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

Примечание. Странно иметь медиа-запросы CSS внутри элемента HTML. Это портит разделение представления и структуры. Но это единственный способ вовремя предоставить необходимую информацию о размерах, чтобы добиться эффективности.

<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 может иметь 2x после него в списке srcset .

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

Примечание. Вы можете использовать либо дескрипторы ширины , либо дескрипторы плотности, но не оба вместе.

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

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

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

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

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

В идеале ваши презентационные или декоративные изображения вообще не должны присутствовать в 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 .

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

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

Необходимо добавить стили, чтобы изображения помещались в область просмотра.

Истинный

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

ЛОЖЬ

Стили обязательны.

Если высота и ширина изображения приведены к неестественному соотношению сторон, какие стили помогут настроить соответствие изображения этим пропорциям?

object-fit

Укажите, насколько изображение соответствует, с помощью таких ключевых слов, как contain и cover .

image-fit

Этого объекта не существует, я его придумал.

fit-image

Этого объекта не существует, я его придумал.

aspect-ratio

Это может привести к неестественному соотношению изображения или устранить его.

Установка height и width изображений не позволяет CSS стилизовать их по-другому.

Истинный

Воспринимайте их скорее как подсказки, чем как правила.

ЛОЖЬ

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

Атрибут srcset не _______ атрибут src , а _______ его.

дополняет, заменяет

srcset определенно не заменяет атрибут src .

заменить, дополнить

Он предоставляет дополнительные возможности браузеру на выбор, если он способен.

Отсутствующий alt на изображении аналогичен пустому alt .

Истинный

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

ЛОЖЬ

Отсутствие alt ничего не сигнализирует программе чтения с экрана.