Записки HTML-верстальщика: SRCSET - загружаем правильные картинки на сайт

Добрый день!

Сегодня я хотел бы рассказать за одну из очень удобных техник загрузки изображений на сайт в зависимости от типа устройства. Как Вы знаете, с развитием технологий, появились экраны с разной плотностью пикселей (к примеру, 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 все разработчики:

 

Спасибо за внимание :)   

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