@spaiki007
Программирую на javascript, python, golang, rust

Как использовать тег picture при создании адаптивных изображений?

Всех приветствую друзья!

Постигая дзен адаптивной верстки, надо было переходить на элемент picture... Почитав доки про него у меня появился вопрос. У нас имеются 3 типа устройств чтоб адаптировать под них дизайн. Это мобильник, планшеты и ПК. Но если для ПК я знаю какой размер изображения вывести (это максимальный), то вот для мобилки и планшетов у меня встал вопрос.

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

Помогите, пожалуйста, всю голову сломал уже...
  • Вопрос задан
  • 2797 просмотров
Пригласить эксперта
Ответы на вопрос 3
@IvanPsarev
It-любитель
Заводим тег picture внутри которого указываем дефолтную картинку:
<picture>
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

В данном коде у нас везде просто загрузится "img/mobile.jpg".
Как это можно улучшить? Можно использовать прогрессивные файлы изображений такие как webp (почитать про них стоит отдельно, вкратце - они меньше весят при одинаковом качестве картинки).
Добавляем условие для показа новой картинки:
<picture>
    <source srcset="img/mobile.webp" 
      type="image/webp">
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

Здесь, если браузер поддерживает .webp будет загружена картинка: img/mobile.webp.
Допустим у нас есть брейкпоинт на десктоп при 768px где нам нужно показывать картинку более высокого качества (либо вообще другую). Код можно улучшить так:
<picture>
    <source media="(min-width:768px)" 
      srcset="img/desktop.webp"
      type="image/webp">
    <source media="(min-width:768px)"
      srcset="img/picture/desktop.jpg">
    <source srcset="img/mobile.webp" 
      type="image/webp">
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

Тут мы добавили еще 2 условия: если окно шире 768px и браузер поддерживает webp - грузится desktop.webp, если не поддерживает то - desktop.jpg.
Данную конструкцию можно еще расширить. Например мы хотим чтобы на retina-дисплеях картинки показывались в более высоком качестве. Для этого у нас должны быть копии всех наших картинок но с увеличенным в 2 раза разрешением. Например, наши картинки будут именоваться как mobile@1x.jpg (260х260рх). плюс эти же картинки, но в 2 раза большем разрешении: mobile@2x.jpg (520х520рх). Загружать их, или нет будет решать браузер, на основании данных о плотности пикселей на экрана полученных от системы (это тоже отдельная тема для обсуждения, есть статьис названием что-то вроде "Пиксель на самом деле не пиксель". Точного названия не помню, но смысл в том, что на "так называемых" Retina-дисплеях при фактическом разрешении, например, 2500х1600px браузер будет "считать", что окно шириной 1250px). Короче для "ретинизации" код нужно изменить так:
<picture>
  <source media="(min-width:768px)" 
    srcset="img/desktop@1x.webp, img/webp/desktop@2x.webp 2x"
    type="image/webp">
  <source media="(min-width:768px)"
    srcset="img/picture/desktop@1x.jpg, img/picture/desktop@2x.jpg 2x">
  <source srcset="img/webp/mobile@1x.webp, img/webp/mobile@2x.webp 2x" 
    type="image/webp">
  <img class="image" 
    src="img/mobile@1x.jpg" 
    srcset="img/mobile@2x.jpg 2x"
    alt="Описание" width="260" height="260">
</picture>

Вся эта громадина читается сверху:
- первый <source>: если ширина экрана больше 768рх, браузер поддерживает webp и плотность пикселей 2x грузится desktop@2x.webp, если плотность пикселей 1х - desktop@1x.webp
- если webp не поддерживается, то второй <source> - все тоже самое для .jpg
- если экран уже 768px - третий <source>
- во всех остальных случаях и в случае если браузер не поддерживает загрузится обычный <img>.
Нужно понимать, что для такого подхода требуется иметь для одной картинки 4 файла и это только для одной ширины экрана:
mobile@1x.jpg, mobile@2x.jpg, mobile@1x.webp, mobile@2x.webp.
И еще столько же для desktop.
Вот как-то так, можно добавить еще брейкпоинт для tablet - все по примеру :)
Ответ написан
@tvsjke
информация засекречена
От сетки твоей зависит.

Допустим, есть у тебя 3 брекпоинта: 0-767, 768 - 1199, 1200+

Берешь 3 картинки с шириной 768, 1200 и максимальную, соответственно
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы