Новый image-set как 🖼 тег picture в CSS: не только ретина, но и WebP и AVIF
Channel: Вадим Макеев
Date: 2021-07-16

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 Аутро

Нравится? Становитесь патронами https://www.patreon.com/pepelsbey

Код https://github.com/pepelsbey/playground/tree/main/63
Демо с котом https://pepelsbey.github.io/playground/63/
Image-set на MDN https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set%28%29
Aspect-ratio на MDN https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
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