Новый 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, iZoto