Новый 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 Аутро

Нравится? Становитесь патронами   / pepelsbey  

Код https://github.com/pepelsbey/playgrou...
Демо с котом https://pepelsbey.github.io/playgroun...
Image-set на MDN https://developer.mozilla.org/en-US/d...
Aspect-ratio на MDN https://developer.mozilla.org/en-US/d...
Squoosh https://squoosh.app/
Справочник и конвертер в AVIF https://avif.io/

* * *

Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12–35 мм, f/2,8
Микрофон: Audio-Technica BP40
Свет: Amaran 200d + Light Dome
Софт: DaVinci Resolve, iZotope RX