Оптимизация изображений как фундамент скорости сайта.

Оптимизация изображений как фундамент скорости сайта.

Изображения занимают в среднем 50-70% веса страницы. Это первое место, где можно сэкономить и ускориться.

Современные форматы:

WebP: на 25-35% легче JPEG при сопоставимом качестве. Поддерживается всеми современными браузерами. Конвертация: Squoosh, ImageMagick, автоматически через CDN.

AVIF: ещё на 20% легче WebP. Поддержка браузеров уже хорошая (Chrome, Firefox, Safari), но не 100% — нужен fallback на WebP.

Практические правила:

RealWidth: не загружайте изображение 2000px туда, где оно отображается в 400px. Используйте srcset для разных разрешений экрана.

Lazy loading: атрибут `loading="lazy"` на изображениях ниже первого экрана — браузер загрузит их только при прокрутке.

Сжатие без потерь: инструменты TinyPNG, Squoosh, ShortPixel убирают метаданные и оптимизируют без видимого ухудшения качества.

CLSпредотвращение: всегда указывайте width и height изображения в HTML — браузер зарезервирует место и страница не «прыгает» при загрузке.