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

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

Атрибуты srcset и sizes
Тег picture

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

Атрибуты srcset и sizes
Тег picture

В одном из предыдущих советов мы разобрали, как управлять адаптивностью страницы в целом.

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

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

В ХТМЛ есть инструменты для выбора изображения в зависимости от параметров экрана, на котором открыта страница.

Srcset

Один из самых простых способов автоматизировать подстановку наиболее подходящего изображения — использовать атрибут srcset у элемента img.

Через запятую указываем пути ко всем вариациям изображения и размеры в пикселях:

Обратите внимание на специальную единицу измерения w в размере изображения. Это число указывает на количество «настоящих» пикселей

<img srcset="/img/3000x1500.png 3000w,
             /img/2000x1000.png 2000w,
             /img/1000x500.png 1000w,
             /img/600x300.png 600w,
             /img/300x150.png 300w"
     src="/img/2000x1000.png"
     alt="Пример 1"
/>

Браузер сам подставит наиболее близкое к текущей ширине экрана изображение. Остальные изображения при этом не будут загружены. Атрибут src оставим на случай, если srcset не поддерживается браузером.

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

Есть альтернативный вариант выбирать изображение — указывать коэффициенты, а не ширину. Изображение будет выбрано исходя из плотности точек экрана:

<img srcset="/img/3000x1500.png 2x,
             /img/2000x1000.png 1.5x,
             /img/1000x500.png"
     src="/img/2000x1000.png"
     alt="Пример 1"
/>

Но что если наше изображение занимает не всю ширину экрана, а, например, половину? С примером выше возникнет проблема — на ширине окна 1440 пикселей (2880 без ретины) мы покажем изображение с размерами 3000×1500 пикселей, хотя ширина области, выделенной под изображение, будет равна 634 пикселям (1268 без ретины):

3000 / 1268 = 2,36

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

<div style="width: 50%;">
  <img srcset="/img/3000x1500.png 3000w,
               /img/2000x1000.png 2000w,
               /img/1000x500.png 1000w,
               /img/600x300.png 600w,
               /img/300x150.png 300w"
       src="/img/2000x1000.png"
       alt="Пример 2"
  />
</div>

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

С решением этой проблемы нам может помочь ещё один атрибут элемента img — sizes.

Sizes

С помощью sizes можно задавать критерии выбора того или иного изображения через медиазапросы. Каждому медиазапросу соответствует целевой размер, который служит для браузера ориентиром при выборе конкретного изображения из srcset. Выполняется первое подходящее условие, остальные игнорируются, поэтому порядок условий важен:

<img srcset="/img/3000x1500.png 3000w,
             /img/2000x1000.png 2000w,
             /img/1000x500.png 1000w,
             /img/600x300.png 600w,
             /img/300x150.png 300w"
     sizes="(max-width: 350px) 150px, 
            (max-width: 600px) 300px,
            (max-width: 1400px) 500px,
            1000px"
     src="/img/2000x1000.png"
     alt="Пример 3"
/>

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

Инструкция

(max-width: 350px) 150px

Что означает

При ширине ≤ 350 пикселей подставить изображение, ближайшее к 150 пикселям

Инструкция

(max-width: 600px) 300px

Что означает

При ширине ≤ 600 пикселей подставить изображение, ближайшее к 300 пикселям

Инструкция

(max-width: 1400px) 500px

Что означает

При ширине ≤ 1400 пикселей подставить изображение, ближайшее к 500 пикселям

Инструкция

1000px

Что означает

Во всех остальных случаях подставить изображение, ближайшее к 1000 пикселей

Без sizes

Разрешение изображения слишком большое

С sizes

Разрешение изображения выбирается более оптимально

Нужно помнить об экранах с ретиной. Целевые размеры изображения приводятся к ЦСС‑пикселям — это означает, что на экране с ретиной браузер постарается подставить изображение с удвоенным разрешением.

В следующем совете мы разберём ещё один, более продвинутый, способ управления изображениями на различных размерах экранов.

Что ещё почитать

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.