Текст в Интернете автоматически переносится по краю экрана, чтобы не выходить за пределы. С изображениями дело обстоит иначе. Изображения имеют внутренний размер. Если изображение шире экрана, оно выйдет за пределы экрана, в результате чего появится горизонтальная полоса прокрутки.
К счастью, вы можете принять меры в 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
означает, что соотношение сторон изображений останется постоянным.
Иногда размеры изображения могут быть вне вашего контроля — например, если изображение добавлено через систему управления контентом. Если ваш дизайн требует, чтобы соотношение сторон изображения отличалось от реальных размеров изображения, используйте свойство aspect-ratio
в CSS.
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;
}
Значение cover
object-fit
указывает браузеру сохранять соотношение сторон изображения, даже если это означает обрезку изображения сверху и снизу.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
Если равномерная обрезка сверху и снизу является проблемой, используйте свойство CSS 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: 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
принимает разделенный запятыми список медиазапросов и ширины изображения.
<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 стилизовать их по-другому.
Атрибут srcset
не _______ атрибут src
, а _______ его.
srcset
определенно не заменяет атрибут src
. Отсутствующий alt
на изображении аналогичен пустому alt
.
alt
сообщает программе чтения с экрана, что это изображение является презентационным.alt
ничего не сигнализирует программе чтения с экрана.