Как оптимизировать изображения на фронтенде?

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

Форматы: WebP на 25-35% меньше JPEG, AVIF ещё меньше — используй picture с fallback. Размеры: srcset с разными размерами для разных экранов. Lazy loading: loading="lazy" для картинок ниже fold. Compression: squoosh, sharp для сжатия. Placeholder: blur-up (маленькая размытая версия) или LQIP. CDN с автоматической оптимизацией (Cloudinary, imgproxy). SVG для иконок вместо PNG. Sprites для множества мелких иконок. Next.js Image компонент делает большинство из этого автоматически.

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

Что такое виртуализация списков?