Зображення — найчастіша причина повільного завантаження сторінок на мобільних пристроях. При цьому більшість проєктів досі використовують один файл для всіх розмірів екрана. Це майстер-клас про те, як це виправити технічно грамотно.
Технічна база заняття
Розбираємо атрибути srcset і sizes, тег picture, логіку вибору зображення браузером залежно від щільності пікселів і ширини вьюпорту. Окремо — формати WebP і AVIF: коли їх використовувати, як генерувати та як організувати fallback для старих браузерів.
Core Web Vitals і зображення
LCP у переважній більшості випадків пов'язаний із зображеннями. Ми дивимося на конкретні метрики в Chrome DevTools і PageSpeed Insights, розбираємо, що саме сповільнює завантаження і як це виміряти до та після оптимізації.
Практична частина
Беремо реальну сторінку з галереєю та hero-блоком, аналізуємо поточний стан, впроваджуємо адаптивні зображення і порівнюємо результати. Усі файли та скрипти для автоматизації конвертації залишаються учасникам.
- Тривалість
- 3,5 академічні години з перервою
- Формат
- Онлайн, живе заняття із записом