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

    @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 - все по примеру :)
    Ответ написан