Новый image-set как тег picture в CSS: не только ретина, но и WebP и AVIF

 

00:00 Интро 00:34 Вставка PNG 01:08 Оптимизация в JPEG 01:56 Ретиновый JPEG 02:53 Подключение WebP 04:23 Подключение AVIF 05:42 Картинка как фон 06:35 Основа карточки 09:31 Как делали раньше 10:15 Замена на image-set 11:08 Загрузка по типам 12:33 AVIF в Firefox 12:57 Градиент под текстом 13:43 Ссылка на карточке 14:43 Ресайз карточки 15:43 Аутлайн для ссылки 16:45 Выводы 17:04 Аутро Нравится? Становитесь патронами
Код
Демо с котом
Image-set на MDN
Aspect-ratio на MDN
Squoosh
Справочник и конвертер в AVIF
* * * Камера: Blackmagic Pocket Cinema 4K Объектив: Panasonic 12–35 мм, f/2,8 Микрофон: Audio-Technica BP40 Свет: Amaran 200d + Light Dome Софт: DaVinci Resolve, iZotope RX