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
Код github.com/pepelsbey/playgrou...
Демо с котом pepelsbey.github.io/playgroun...
Image-set на MDN developer.mozilla.org/en-US/d...
Aspect-ratio на MDN developer.mozilla.org/en-US/d...
Squoosh squoosh.app/
Справочник и конвертер в AVIF avif.io/
* * *
Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12-35 мм, f/2,8
Микрофон: Audio-Technica BP40
Свет: Amaran 200d + Light Dome
Софт: DaVinci Resolve, iZotope RX
Негізгі бет Новый image-set как 🖼 тег picture в CSS: не только ретина, но и WebP и AVIF
Пікірлер: 149