Школа
Веб-разработка

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

30 янв 2020
👁 18161   🗩2
Веб-разработка

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

30 янв 2020
👁 18161   🗩2
Юрий Мазурский
Разработчик и дизайнер
Полезно
 21
21
Непонятно
 3
3
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

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"
/>

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

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

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

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

<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>
Пример 2
Изображение занимает половину ширины страницы, но выбирается тот же размер, что и для большого изображения на всю ширину из примера выше

С решением этой проблемы нам может помочь ещё один атрибут элемента 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
Пример 2
Разрешение изображения слишком большое
С sizes
Пример 3
Разрешение изображения выбирается более оптимально

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

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

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

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

Веб‑разработка
Полезно
 21
21
Непонятно
 3
3
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Василий Мишустин

> Но что если наше изображение занимает не всю ширину экрана, а, например, половину?

Если известно, что оно занимает половину экрана, то можем вместо <img srcset="/img/3000x1500.png 3000w написать <img srcset="/img/3000x1500.png 6000w и т. д. Или мы так не можем?

Или мы так можем, но только в случае, если точно знаем, что не будет варианта, когда от размера экрана меняется раскладка и относительные размеры изображений на экране?

Вариант, когда от размера экрана меняется раскладка и относительные размеры изображений на экране, понятен. Тогда действительно стоит использовать sizes="(max‑width: 350px) 150px и т. д.

Василий!

Написать 6000w будет некорректно. Через этот параметр мы сообщаем браузеру, какой ширины изображение, чтобы он не скачивал его и не проверял сам. Возможно такой вариант сработает, но больше похоже на хак 🙂

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы