Полное руководство по отзывчивым изображениям!
Перевод статьи «Complete Guide to Responsive Images!» Элада Шехтера
Отзывчивым можно назвать то изображение, размер которого меняется в зависимости от разрешения экрана. Концепция отзывчивых изображений появилась благодаря необходимости решать такие задачи, как, например, показ разных изображений на разных девайсах. И выражается этот подход в том числе в гибком переключении между размерами, типами изображений и прочего. Спецификация отзывчивых изображений была создана только после того, как появился адаптивный дизайн.
Со временем появилось множество способов реализации отзывчивых изображений, расширяя инструментарий фронтенд-разработчиков. Это так же сделало использование отзывчивых изображений довольно сложным. Вот почему я решил погрузится в эту тему только недавно, несмотря на то, что сама технология существует довольно давно. И именно из-за этой сложности я понимал, что в каждом прочитанном мною источнике чего-то не хватает, не показана вся картина (каламбур).
После прочтения и изучения множества источников я решил написать собственное руководство, в котором я, надеюсь, собрал все способы реализации отзывчивых изображений. Здесь собрана вся информация, нужная для понимания этой технологии, что делает эту статью Полным руководством по отзывчивым изображениям.
Короткое введение в экраны повышенной плотности
Перед тем как погрузится во все методы использования отзывчивых изображений нужно разобраться с важной концепцией пикселя в вебе. Мы привыкли думать, что на мобильных девайсах картинки должны быть меньше потому что ширина экрана девайса меньше. Но это не всегда так.
«Пиксель это не пиксель»
Существует разница между разрешением в CSS и разрешением экрана:
- разрешение в CSS предназначено для измерений на нашем сайте;
- разрешение экрана это фактическое количество пикселей на экране.
На сегодняшний день разница между этими понятиями встречается на всех мобильных устройствах и на некоторых экранах компьютеров.
Пример:
Разрешения на Samsung Galaxy S10:
- Разрешение экрана — 1440 на 3040 пикселей
- Разрешения в CSS — 360 на 760 пикселей
- Плотность дисплея — 4х (по 4 физических пикселя на один CSS-пиксель)
Это означает, что если, например, у вас есть место под картинку в 300 пикселей шириной, то вы можете в этом месте загрузить картинку размером в 4 раза больше (1200 пикселей в ширину) и в результате получите действительно более чёткое изображение!
Мы привыкли думать, что на мобильных девайсах картинки должны быть меньше потому что ширина экрана девайса меньше. Но это не всегда так.
Но будьте осторожны: показывая большее изображение вы платите цену. Большие изображения грузятся медленнее, а на мобильных девайсах этот эффект усиливается, поскольку скорость мобильного интернета довольно ограничена. Поэтому вы каждый раз должны взвешивать все «за» и «против» и решать, где чёткость изображения действительно стоит того, чтобы замедлить скорость загрузки страницы.
В этой статье я опишу восемь методов реализации отзывчивого дизайна. Первые два используют элемент <img> с атрибутом srcset; следующие два используют элемент <picture>; следующие два используют CSS: в одном применяется атрибут image-set, а в другом используются медиавыражения для отзывчивого дизайна (min-resolution и max-resolution); в последних двух я покажу фичи CSS — функцию image().
Причина наличия такого большого количества методов в том, что существует несколько проблем, которые призван решать отзывчивый дизайн: показ меньших изображений на меньших экранах; использование преимуществ плотности экранов; изменение фокуса изображений на разных разрешениях; использование типов файлов, которые не поддерживаются всеми браузерами.
Теперь можем перейти непосредственно к методам отзывчивых изображений:
Метод описания плотности экрана
Этот метод подходит для изображений, размер которых фиксирован на экранах повышенной плотности. Это значит, что на некоторых экранах для изображений с размером 200 пикселей в CSS/HTML мы можем загрузить картинку в 600 пикселей — или большего размера— потому что на экранах повышенной плотности оно будет давать лучший визуальный результат.
Для реализации этого подхода мы используем новый атрибут srcset с описанием плотности экрана. Мы пропишем атрибут srcset с набором картинок разного размера и пропишем при какой плотности экрана какая из них должна показываться. Идентификатор плотности экрана указывает какая должна быть плотность дисплея для показа каждой из картинок: 1x, 2x, 4x и так далее.
Внимание! Идентификатор плотности экрана будет выбирать картинку в зависимости от плотности пикселей, а не от фактического размера изображения.
Рекомендуется по прежнему использовать стандартный атрибут src для фоллбэка в браузерах, не поддерживающих srcset (IE и Opera mini).
<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 с описанием ширины
В этом методе мы прописываем атрибут srcset с набором картинок и указанием, на каких ширинах каждая из них должна показываться (мы должны указывать ширину потому что браузер не «знает» фактический размер картинки). В случаях, когда этот подход используется без атрибута sizes он опирается на предположениях браузера, что ширина картинки должна заполнять ширину области просмотра.
Этот метод немного напоминает тот, что мы обсудили выше, с описанием плотности экрана, в котором мы тоже использовали атрибут srcset с набором картинок и условиями их показа. Но они отличаются тем, что теперь мы будем определять какую картинку показывать в зависимости от её ширины, а не от плотности экрана. То есть мы используем описание ширина (ширины картинки, которая нам необходима), но не описываем плотность экрана. Но эти понятия связаны для экранов с повышенной плотностью.
Примечание: даже при условии, что мы описываем ширину, а не плотность экрана, браузер всё равно принимает во внимание экраны повышенной плотности.
Атрибут sizes
Помимо описания списка изображений с уточнением ширины (используя атрибут srcset) мы должны предоставить браузеру соотношение размера картинки к экрану браузера. И для этого нам пригодится атрибут sizes.
Атрибут sizes это набор медиавыражений с размерами картинки для каждого условия. (Примечание: количество медиавыражений не обязательно должно быть равно количеству картинок, как вы увидите в следующем примере). В конце списка мы должны указать значение ширины без медиавыражения в качестве фоллбэка.
Условие размера картинки — тут есть 3 варианта: единицы vw, единицы px и комбинация этих единиц с применением функции calc(). Например, calc(30vw + 300px).
Пример со сложным условием:
sizes="(max-width: 399px) 50vw,
(min-width: 400px) and (max-width: 900px) calc(30vw - 40px),
100vw">На простом адаптивном сайте размеры обычно имеют только одно условие и фоллбэк, а в srcset будут указаны несколько комбинаций размеров и ширин изображения:
<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">После того, как вы отдали браузеру массив картинок и настоящий размер картинок в CSS при помощи медиавыражений, браузер выберет нужную картинку с учётом всех этих условий. И не беспокойтесь, на экранах повышенной плотности браузер при выборе картинки будет опираться на реальное соотношение пикселей на устройстве.
Элемент <picture>
До сих пор мы говорили только об элементе <img> и в большинстве случаев этого будет достаточно потому что элемент <img> с атрибутами srcset и sizes покроет большую часть задач. Но элемент <picture> даёт дополнительные возможности для реализации отзывчивых изображений. В следующих двух методах пойдёт речь о более сложных случаях:
Метод с <picture> для изменения направления изображения
Метод изменения направления это способ показывать картинки с разными соотношениями сторон или с разными точками фокуса на разных девайсах. Внутри элемента <picture> мы можем загружать картинки с разных путей в зависимости от CSS ширины экрана устройства. Таким образом вы можете выбирать одно и то же изображение, но нарезанное по-разному, и тем самым фокусироваться на важной части изображения на небольших экранах.
Как работает метод изменения направления?
Внутри элемента <picture> мы используем элемент <source>. В каждом элементе <source> мы прописываем два атрибута: media и srcset. Значением атрибута media является медиавыражение. Точно такое же как обычное медиавыражение. И для каждого медиавыражения определяется атрибут srcset.
Мы можем прописать столько элементов <source>, сколько нам нужно.
После всех элементов <source> мы указываем обычный элемент <img>. Это важный момент потому что без элемента <img> вся конструкция работать не будет. Кроме того для добавления <img> есть ещё несколько важных причин:
- Если браузер не поддерживает
<picture>, то будет использован элемент<img>(например, в случаях IE и Opera mini). - Если ни один из элементов
<source>не подошёл по условиям, то браузер использует элемент<img>. - Атрибут
altдля обеспечения доступности можно добавить только на элемент<img>.
Важен так же и порядок указания элементов <source>. Браузер выберет первый источник, который сработает. Ниже иллюстрация того, как это всё работает:
Полный HTML пример:
<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>Известный пример с Котиком от Google. Они сделали его, когда поддержка элемента <picture> появилась в Chrome 🙂
Метод с использованием <picture> для разных типов файлов
Другая ситуация, в которой очень пригодится элемент <picture> — использование типов файлов с изображениями, которые не поддерживаются всеми браузерами. Например, Google создал новый тип файлов со сжатыми изображениями, который называется webp. Webp не поддерживается всеми браузерами. Например, Safari и IE. И снова элемент <picture> спасёт нас, но в другой конфигурации.
В этой ситуации мы используем новый атрибут type у элемента <source>. Каждый атрибут type будет указывать на разные изображения в комбинации с атрибутом srcset. Ровно как в примерах выше порядок элементов <source> важен. Браузер выберет первый работающий вариант. Если ни один из вариантов не работает, то браузер использует элемент <img> в качестве фоллбэка. Посмотрите иллюстрацию:
В недавнем прошлом SVG не работало в старых версиях IE. И вот такая ситуация с тремя вариантами типов файлов встречалась довольно часто.
<picture>
<source type="image/svg+xml" srcset="logo.svg">
<source type="image/webp" srcset="logo.webp">
<img src="logo.png" alt="investing.com">
</picture>Существует большое количество типов изображений и вы можете найти распространённые случаи использования на сайте Mozilla или заглянуть в полный список типов.
Отзывчивые картинки в CSS
До сих пор мы изучали методы реализации отзывчивых изображений при помощи HTML. Для многих задач этого более чем достаточно, но существует для способа реализации отзывчивых изображений при помощи CSS, с которыми вам стоит ознакомиться.
Функция image-set
Параметрами функции image-set являются пары картинок и плотностей. Точно так же как мы указывали это в атрибуте srcset в методе описания плотности экранов. Браузер выберет то изображение, которое соответствует текущему экрану.
background-image: image-set( url("bg.png") 1x,
url("bg-2x.png") 2x );Примечание: image-set появилась раньше, чем srcset и не обновлялся. И в нём отсутствует возможность указания ширины. Поэтому браузер выбирает изображения только опираясь на плотность экрана, но не на актуальный размер картинки!
Браузерная поддержка image-set
Складывается ощущение, что все просто забыли про эту функцию — некоторые браузеры вообще её не поддерживают, для некоторых нужно указывать префикс -webkit. Для максимального покрытия всех возможных браузеров используйте эту функцию так, как указанно в примере ниже:
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);
Медиавыражения для определения плотности экрана
Существует два значения медиавыражений, пригодных для адаптивного дизайна: min-resolution и max-resolution. Они также как и image-set, подходят для случаев, когда вы хотите показывать разные изображения в зависимости от плотности экрана устройства. Разница между этими двумя методами в том, что здесь вы можете использовать абсолютно любые стили.
Примечание: Safari до сих пор использует старый синтаксис с префиксом: -webkit-min-device-pixel-ratio и -webkit-max-device-pixel-ratio. Для поддержки всех браузеров вам нужно указывать оба варианта. Пример:
Ожидаемые фичи для отзывчивых изображений
Направление изображения при помощи CSS-функции image()
Как мы видели в методе изменения направления существуют кейсы, в которых мы хотим нарезать изображения по-разному в зависимости от размера области просмотра. В противовес этому методу, использующемуся в HTML, существует спецификация, позволяющая делать это же при помощи CSS!
Эта возможность реализована при помощи функции image(). Её параметрами являются url картинки и четыре цифры: начальная позиция по оси X, начальная позиция по оси Y, ширина и высота.
background-image: image("myimage.webp#xywh=0,20,40,60");И если в методе с использованием HTML-метода мы должны указывать разные изображения, то в текущем варианте мы можем использовать одно и тоже изображение, но нарезать его так, как нам нужно, применяя CSS-функцию image().
CSS для типов картинок
Как мы уже видели раньше, существуют ситуации, в которых мы должны подгружать разны типы файлов с изображениями в зависимости от поддержки в конкретном браузере. Для этой возможности тоже существует спецификация CSS. И в ней так же используется функция image(), но с немного другим синтаксисом. Мы можем указать внутри функции набор изображений и браузер будет рассматривать их в том порядке, в котором они написаны, и использует первый файл, который сработает.
.help::before {
content: image("try.webp", "try.svg", "try.gif");
}К сожалению, в данный момент у этой фичи нулевая поддержка. Вы можете найти больше информации на сайте Mozilla.
Заключение
Вот и всё.
Я надеюсь, что вы насладились чтением этой статьи и узнали что-то новое. Если вам понравился этот пост, то я буду очень благодарен за аплодисменты и шеринг :-)
Больше моих статей про CSS:
Новые логические свойства в CSS!
Как на самом деле работает position: sticky в CSS
Кто я?
Меня зовут Элад Шехтер, я веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.
Читать меня можно тут:
мой Твиттер,
Facebook,
LinkedIn.
Вы можете найти меня в группах на Facebook:
CSS Masters
CSS Masters Israel
