Frontend
July 21, 2020

Responsive images

Существует такая проблема, как вес сайта.
С одной стороны, контент должен иметь высокое качество, с другой — сайт должен быстро загружаться.
Так же это влияет на оценки Google PageSpeed Insights и других анализаторов.

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

Сперва скажу о двух возможных вариантах с которыми мы можем столнкуться:

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

Итак, перейдем к решению первой задачи.

Изображения разного разрешения

Для примера возьму это изображение с unsplash.

Возьмем ситуацию когда мы делам блок с изображением внутри контейнера.
К примеру максимальный размер контейнера будет 1280px.

Исходя из этого нам необходима картинка шириной 1280px для мониторов с стандартной плотностью пикселей и 2560px для мониторов с 2х плотностью, ну и т.д.
Для планшетов и мобильных устройств размер картинки нужен меньше.

Теперь в зависимости от задач и верстки, выбираем какое количество версий изображения будем генерировать.
Для примера я возьму 3 "ступеньки":

  • Мобильная версия 480px (+ 960px для 2й плотности пикселей)
  • Планшетная версия 1000px (+ 2000px)
  • Десктопы (максимальный размер контейнера) 1280px (+ 2560px)

Как итог имеем 6 версий изображений, но если будем внимательны, увидим, что мобильная 2x и планшетная 1x правктически одинаковы.
Таким образом нам будет достаточно и 5ти изображений.

Вот такой результат у нас получился: ссылка на пример.