Как работают responsive images?

Middle
235 просмотров
AFK Offer AI

srcset + sizes атрибуты: . Браузер выбирает оптимальный размер. для art direction: разные кропы для мобильного и десктопа. srcset с x-дескриптором для retina: srcset="1x.jpg 1x, 2x.jpg 2x". Next.js Image делает это автоматически — генерирует srcset для разных размеров. Не отдавай 2000px картинку на мобильный 375px экран — пустая трата трафика. Используй CDN с resize on-the-fly (Cloudinary, Imgix).

Следующий вопрос

Как мокать модули в Jest/Vitest?