Полное руководство по отзывчивым изображениям!

Короткое введение в экраны повышенной плотности

  • разрешение в CSS предназначено для измерений на нашем сайте;
  • разрешение экрана это фактическое количество пикселей на экране.
  • Разрешение экрана — 1440 на 3040 пикселей
  • Разрешения в CSS — 360 на 760 пикселей
  • Плотность дисплея — 4х (по 4 физических пикселя на один CSS-пиксель)

Метод описания плотности экрана

<img src="cat-200px.jpg" alt="котик без сахара" width="200"
srcset="cat-200px.jpg 1x,
cat-400px.jpg 2x,
cat-600px.jpg 3x,
cat-800px.jpg 4x">

Метод описания ширины и атрибут sizes

Атрибут srcset с описанием ширины

Атрибут sizes

sizes="(max-width: 399px) 50vw,
(min-width: 400px) and (max-width: 900px) calc(30vw - 40px),
100vw">
<img src="cat.jpg" alt="cat on a watermelon" 
srcset="cat-200px.jpg 200w,
cat-400px.jpg 400w,
cat-600px.jpg 600w" sizes="(max-width:800px) 30vw, 600px">

Элемент <picture>

Метод с <picture> для изменения направления изображения

Метод изменения направления — разные изображения в зависимости от ширины области просмотра экрана.

Как работает метод изменения направления?

Элемент source внутри элемента picture указывает на конкретное изображение
  • Если браузер не поддерживает <picture>, то будет использован элемент <img> (например, в случаях IE и Opera mini).
  • Если ни один из элементов <source> не подошёл по условиям, то браузер использует элемент <img>.
  • Атрибут alt для обеспечения доступности можно добавить только на элемент <img>.
<picture>
<source media="(min-width: 600px) and (max-width: 1200px)"
srcset="images/sinai-medium-screen.jpg">
<source media="(min-width: 1201px)"
srcset="images/sinai-large-screen.jpg">
<img src="images/sinai-small-screen.jpg"
alt="Unicorn Pool Float">
</picture>

Метод с использованием <picture> для разных типов файлов

Множество типов файлов изображений
<picture>
<source type="image/svg+xml" srcset="logo.svg">
<source type="image/webp" srcset="logo.webp">
<img src="logo.png" alt="investing.com">
</picture>

Отзывчивые картинки в CSS

Функция image-set

background-image: image-set( url("bg.png") 1x,
url("bg-2x.png") 2x );

Браузерная поддержка image-set

background-image: url("bg.png"); /* IE / Edge / Firefox *//* Chrome & Opera */
background-image: -webkit-image-set( url("bg.png") 1x,
url("bg-2x.png") 2x);
background-image: image-set( url("bg.png") 1x,
url("bg-2x.png") 2x);

Медиавыражения для определения плотности экрана

Ожидаемые фичи для отзывчивых изображений

Направление изображения при помощи CSS-функции image()

background-image: image("myimage.webp#xywh=0,20,40,60");

CSS для типов картинок

.help::before {
content: image("try.webp", "try.svg", "try.gif");
}

Заключение

Кто я?

Ресурсы

--

--

--

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Workafrolic (±∞)

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

More from Medium

The Enigmatic Modal

ESlint Shareable configs for Vue

Tooltip on disabled options in Material UI Autocomplete

Build a library with esbuild (vol. 2)