Атрибут srcset, Retina, WebP. Какая связь?

Что такое атрибут srcset, как он связан с Retina-дисплеями и зачем это нужно верстальщику? Сразу много новых понятий, будем постепенно разбираться.

У некоторых крутых устройств семейства Apple, дисплеи с плотностью пикселей на дюйм в 2 раза выше, чем на обычных экранах. Сделано это, ради более качественной графики (типа самые умные). Чтобы изображения на сайте не были размытыми, они должны быть в 2 раза больше, чем оригинальные.

Подготовка изображений с учетом Retina-экранов

В графическом редакторе создать две одинаковые картинки, но с разными разрешениями: 72 dpi / 144 dpi. Перед верстальщиком стоит задача, как отдавать браузеру большие картинки только для Retina-дисплеев, а оригинальные картинки всем остальным.

Атрибут srcset

Атрибут srcset специально создан для скармливания картинок нужных размеров браузеру. Мы говорим браузеру, что у нас есть картинки хорошего качества, пожалуйста, на ваш выбор. На устройство с обычным экраном загрузится оригинальное изображение, а на Retina – изображение удвоенного размера.

Вставляем картинку обычным способом:

Вставляем картинку с учетом Retina-дисплеев, добавляем тегу img атрибут srcset с модификаторами 1x / 2x:

Если браузер не обнаружит Retina, то подгрузит картинку из src атрибута. Главное, что картинки не будут загружаться все сразу.

Favicon для Retina

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

Фавикон генератор

1. Для генерации фавиконки воспользуемся онлайн-генератором https://realfavicongenerator.net.
2. Подготовим картинку размером 260x260 пикселей в любом из следующих форматов: PNG, JPG, SVG.
3. Загрузим её на сервис
4. Откроется страница, где можно сделать некоторые настройки, например, выбрать цвет фона для фавиконки.
5. Нажимаете кнопку Generate your Favicons and HTML code.
6. Скачиваете архив с разными размерами фавиконок и переносите их в папку с картинками своего проекта.
7. Сгенерированный код вставляете в секцию head и меняете пути.

Картинки формата WebP

Мы хорошо понимаем, что удвоенный размер картинки ради красоты, негативно скажется на скорости её загрузки. Как можно уменьшить вес картинок без потери качества? У товарища Google есть формат WebP, отвечающий этим условиям и созданный как альтернатива JPG и PNG, ещё в 2010 году.

Как конвертировать в WebP формат

Можно воспользоваться сервисом https://squoosh.app. Перетаскиваете картинку, выбираете формат WebP, размер сжатой картинки уменьшается на 70-90%.

Как вставить WebP

Поскольку формат WebP поддерживается не всеми браузерами, рекомендуется вставлять картинки через тег <picture>. Внутри которого вставляем картинку через <source> в новом формате для ретина и неретина экранов. Для браузеров, которые не понимают webp, вставляем картинку через тег img.

Разные изображения для десктопов и мобильников

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

Код целиком