Добрый день!
Сегодня я хотел бы рассказать за одну из очень удобных техник загрузки изображений на сайт в зависимости от типа устройства. Как Вы знаете, с развитием технологий, появились экраны с разной плотностью пикселей (к примеру, RETINA-экраны).
Появилась проблема: на таких экранах обычные картинки выглядят достаточно "зернисто" и некрасиво. Как вариант - загружать картинку в два-три раза больше, и сжимать её до нужного нам размера. Однако, из-за этого мы проигрываем в том, что картинка весит в 2-3, а то и более раз больше.
Решение: одним из очень крутых, но почему-то недооцененных решений является использвание атрибута SRCSET для тега <img>. Этот атрибут помогает определить тип устройства и загрузить изображение в зависимости от описанных внутри тега условий.
Ниже рассмотрим пример его использования
Допустим, у нас есть кусок кода:
<img src="https://s6.postimg.org/8c728jmi9/image_src.png"
srcset="https://s6.postimg.org/t59gwyf1t/image_1x.png 1x,
https://s6.postimg.org/jlzs3hrjl/image_2x.png 2x,
https://s6.postimg.org/wrfa9llf5/image_3x.png 3x" alt="" /> Внутри у нас мы видим обычный параметр src, который загрузит стандартную картинку для браузеров, которые не поддерживают свойство srcset (это, к примеру, "любимый" ИЕ), и загрузит свою картинку в зависимости от плотности пикселей:
Для обычного экрана мы увидим:
Для RETINA с плотностью пикселей 2.0:
Для RETINA с плотностью пикселей 3.0:
При этом, примечательно то, что у нас действительно загружается только одна картинка, подходящая под конкретное условие - остальные картинки сайт не нагружают (!!).
Атрибут sizes:
В дополнение ко всему, мы можем в самом теге <img> задать параметр, чтобы изображение занимало, к примеру, половину нашей области: в этом поможет атрибут sizes. Добавим его в наш пример:
<img src="https://s6.postimg.org/8c728jmi9/image_src.png" sizes="50vw"
srcset="https://s6.postimg.org/t59gwyf1t/image_1x.png 1x,
https://s6.postimg.org/jlzs3hrjl/image_2x.png 2x,
https://s6.postimg.org/wrfa9llf5/image_3x.png 3x" alt="" /> Кроссбраузерность:
Что касается кроссбраузерности, то здесь всё довольно неплохо. А учитывая то, что для неподдерживаемых браузеров грузится обычная картинка из SRC - то этот лайфхак musthave все разработчики:
Очень полезная статья, спасибо. Все придельно просто и ясно.