Оптимизация изображений для сайта | WebP, сжатие, lazy loading

Почему это важно?

Изображения — это 50-80% веса страницы. Неоптимизированные картинки:

• ❌ Замедляют загрузку
• ❌ Ухудшают SEO
• ❌ Расходуют трафик пользователей
• ❌ Снижают конверсию

Форматы изображений

JPEG

• Для фотографий
• Хорошее сжатие
• Не поддерживает прозрачность

PNG

• Для графики с прозрачностью
• Логотипы, иконки
• Больший размер файла

WebP

• Современный формат от Google
• На 25-35% меньше JPEG
• Поддерживает прозрачность
• Поддерживается всеми браузерами

AVIF

• Новейший формат
• Ещё лучшее сжатие
• Пока не везде поддерживается

SVG

• Векторная графика
• Иконки, логотипы
• Масштабируется без потери качества

Методы оптимизации

1. Правильный размер

Не загружайте картинку 4000x3000px, если она отображается 400x300px.

2. Сжатие

• JPEG: качество 70-85%
• PNG: используйте TinyPNG
• WebP: автоматическое сжатие

3. Lazy Loading

Загрузка картинок только когда они попадают в область видимости.

<img src="image.jpg" loading="lazy">

4. Responsive Images

Разные размеры для разных экранов:

<img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w">

5. CDN

Раздача картинок с серверов, близких к пользователю.

Инструменты

• TinyPNG — онлайн сжатие
• Squoosh — от Google
• ImageOptim — для Mac
• ShortPixel — плагин WordPress

Чек-лист оптимизации

• ☐ Используйте WebP с fallback
• ☐ Сжимайте все изображения
• ☐ Указывайте width и height
• ☐ Включите lazy loading
• ☐ Используйте srcset
• ☐ Добавьте alt-атрибуты

Хотите ускорить сайт? Закажите оптимизацию — сделаем сайт быстрым!