Оптимизация изображений для сайта: как ускорить загрузку на 70% без потери качества
483
Время чтения: 19 минут
- Почему изображения — главный тормоз сайта?
- Какой формат выбрать: JPG vs PNG vs WebP vs AVIF
- Пример: фото 200×150 до и после оптимизации
- Ошибка №1: неправильные размеры в HTML/CSS
- Как оптимизировать: 3 шага (2025)
- Типичные ошибки при оптимизации изображений (и как их исправить)
- Чек-лист: 5 пунктов для быстрой проверки изображений на сайте
- FAQ: отвечаем на ваши вопросы
- Часто задаваемые вопросы
Представьте: ваш сайт теряет 53% мобильных посетителей, если грузится дольше 3 секунд. А виноваты — изображения. В 2025 году 1 МБ картинок = 1 потерянный клиент. Готовы сократить вес в 5–10 раз? Разберём JPG, PNG, WebP, AVIF и реальные примеры. Поехали!
Почему изображения — главный тормоз сайта?
Средняя страница в 2025 — 2.4 МБ, из них 48% — картинки HTTP Archive. Каждая лишняя КБ = +0.1 сек к загрузке. Google PageSpeed: >90 баллов — только с оптимизацией. При этом важно помнить, что даже после сжатия изображений скорость может снижаться из-за цепочки редиректов (чейн-редирект) — каждый лишний редирект добавляет время на установку соединения. Настройка .htaccess директив для кэширования на сервере (например, через ExpiresByType) также помогает избежать повторной загрузки тяжёлых картинок. А использование сервисов вроде tinypng/tinyjpg — единственный безопасный способ переноса сайта на новую оптимизацию без потери данных.
Для новичков: что даёт оптимизация?
- Скорость ↑ → SEO ↑
- Трафик ↑ → конверсии ↑
- Меньше отказов на мобильных
Для экспертов: Core Web Vitals 2025
- LCP: <2.5 сек → изображения <100 КБ
- CLS: без сдвигов → правильные размеры
- FID: <100 мс → меньше JS в картинках
Какой формат выбрать: JPG vs PNG vs WebP vs AVIF
| Формат | Для чего | Сжатие | Поддержка 2025 |
|---|---|---|---|
| JPG | Фото | 60–80% | 100% |
| WebP | Фото + графика | 25–34% лучше JPG | 98% |
| AVIF | Будущее | 50% лучше WebP | 85% (Chrome, Firefox) |
| PNG | Логотипы, иконки | Без потерь | 100% |
Рекомендация: WebP — золотая середина. AVIF — для прогрессивных сайтов. При этом не забывайте про кэширование на сервере: если настроить .htaccess директивы для долгого хранения WebP/AVIF, повторные загрузки будут мгновенными. А чтобы избежать цепочки редиректов (чейн-редирект) при переключении форматов, используйте mod_rewrite с одним правилом, а не несколько последовательных перенаправлений.
Пример: фото 200×150 до и после оптимизации
| Фотография 200×150 пикселей | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Не оптимизированная | Оптимизированная (WebP) | ||||||||||||
|
|
||||||||||||
Результат: −82% веса, качество — на глаз не отличается. Такой результат достигается не только сменой формата, но и грамотным сжатием изображений (tinypng/tinyjpg) — эти сервисы удаляют метаданные и оптимизируют цветовой профиль без потери видимого качества.
Ошибка №1: неправильные размеры в HTML/CSS
| Размер: 66.8 КБ | |
|---|---|
| Как выглядит (200×150) | Реальный размер (400×300) |
 |
 |
→ 5.2× переплата трафика!
| Размер: 12.7 КБ | |
|---|---|
| На сайте (200×150) | Реально (200×150) |
 |
|
Итог: −80% веса, LCP <2 сек. Чтобы закрепить результат, добавьте кэширование на сервере через .htaccess директивы — это позволит браузеру не загружать оптимизированные изображения повторно при возврате пользователя на страницу.
Как оптимизировать: 3 шага (2025)
- Выберите формат: WebP/AVIF →
<picture>fallback - Сожмите: Squoosh.app, ImageOptim, TinyPNG (сжатие изображений tinypng/tinyjpg — стандарт индустрии для JPG и PNG)
- Укажите размеры:
widthиheightв HTML
Автоматизация? Настроим WebP + CDN. Важно: при переносе сайта на новую CDN или хостинг используйте единственный безопасный способ переноса сайта — 301, чтобы избежать цепочки редиректов (чейн-редирект), которая убивает скорость загрузки изображений.
Типичные ошибки при оптимизации изображений (и как их исправить)
| Ошибка | Пример | Правильное решение |
|---|---|---|
| Сжатие с потерями «на глаз» | Установка качества 30% в JPG для фото — сильные артефакты, размытые края | Используйте 60–75% для фото. Для WebP/AVIF можно 50–65% — визуально без потерь. Сервисы вроде tinypng/tinyjpg автоматически подбирают оптимальный баланс |
| Игнорирование атрибута loading="lazy" | Все картинки загружаются сразу, даже те, что ниже экрана — LCP страдает | Добавьте loading="lazy" для изображений «ниже сгиба». Критические (герой, логотип) — без lazy. Дополнительно настройте кэширование на сервере через .htaccess директивы, чтобы lazy-изображения после загрузки не запрашивались снова |
| Отсутствие srcset для ретины | Одно изображение 1200px для всех экранов — на мобильных трафик ×3 | Используйте srcset с вариантами 1×, 2×. Пример: img-600.jpg 1x, img-1200.jpg 2x. При смене путей избегайте цепочки редиректов (чейн-редирект) — настройте .htaccess так, чтобы старые ссылки вели на новые файлы через один 301 |
| Конвертация PNG в JPG без проверки прозрачности | Логотип с прозрачным фоном сохранили как JPG — появился белый прямоугольник | Для прозрачности используйте PNG, WebP (lossless) или AVIF. JPG не поддерживает альфа-канал. Для массовой конвертации применяйте tinypng/tinyjpg — они безопасно обрабатывают PNG с прозрачностью |
Вы будете получать статьи по нашим направлениям, советы и кейсы предпринимателей
Чек-лист: 5 пунктов для быстрой проверки изображений на сайте
- Формат — все фото в WebP/AVIF, иконки и логотипы в SVG или PNG (с прозрачностью). JPG — только для fallback. Проверьте, не возникает ли цепочка редиректов (чейн-редирект) при переключении форматов — используйте
<picture>без лишних перенаправлений - Размеры — физический размер изображения совпадает с отображаемым (не больше, чем нужно). Проверьте через DevTools. Если меняли пути к файлам — единственный безопасный способ переноса сайта — 301, не оставляйте старые ссылки без редиректа
- Вес — каждое изображение до 100 КБ для LCP, остальные — до 50–70 КБ. Используйте Squoosh или TinyPNG (сжатие изображений tinypng/tinyjpg даёт стабильное качество)
- Атрибуты — прописаны
widthиheight(чтобы не было CLS),loading="lazy"для некритичных. Настройте кэширование на сервере через .htaccess директивы — это ускорит повторные загрузки - Адаптивность — настроен
srcsetдля разных разрешений экрана (1×, 2×) или<picture>с WebP/AVIF. Убедитесь, что .htaccess не создаёт множественных редиректов при обработке разных версий
FAQ: отвечаем на ваши вопросы
WebP не поддерживается — что делать?
Используйте <picture>: <picture>. При этом настройте .htaccess директивы, чтобы браузер кэшировал выбранный формат — это исключит повторные проверки поддержки при каждом визите.
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="">
</picture>
А GIF для анимаций?
Замените на WebM или APNG — в 3 раза легче. После замены проверьте, нет ли цепочки редиректов (чейн-редирект) со старых GIF-файлов — используйте единственный безопасный способ переноса сайта — 301 в .htaccess.
Сколько сжимать фото?
60–75% качества — оптимально. Ниже — артефакты. Для пакетной обработки используйте сжатие изображений (tinypng/tinyjpg) — они дают предсказуемый результат без ручной настройки.
Хотите Page
Часто задаваемые вопросы
Какой формат изображений лучше всего использовать для сайта в 2025 году?
WebP — это золотая середина, так как он обеспечивает сжатие на 25-34% лучше JPG при поддержке 98% браузеров. Для максимальной производительности на прогрессивных сайтах используйте AVIF, но помните о его более низкой поддержке (85%).
Как сжать изображение без потери видимого качества?
Используйте сервисы вроде TinyPNG или TinyJPG, которые удаляют метаданные и оптимизируют цветовой профиль. Для фото и графики выбирайте WebP с настройкой качества 60-80%, что позволяет сократить вес в 5-10 раз.
Почему после сжатия изображений сайт всё равно грузится медленно?
Возможно, проблема в цепочке редиректов (чейн-редирект) при переключении форматов — каждый лишний редирект добавляет время на установку соединения. Настройте .htaccess с одним правилом mod_rewrite и добавьте директивы кэширования через ExpiresByType для избежания повторной загрузки.
Какие Core Web Vitals связаны с изображениями и какие у них нормативы?
LCP должен быть менее 2.5 секунд, для этого каждое изображение должно весить меньше 100 КБ. CLS требует правильных размеров в HTML/CSS, чтобы не было сдвигов. FID менее 100 мс достигается минимизацией JavaScript в обработке картинок.
В чём главная ошибка новичков при оптимизации изображений?
Ошибка №1 — использование неправильных размеров в HTML/CSS, когда загружается большое изображение, а отображается маленькое. Это увеличивает вес страницы и замедляет загрузку, поэтому всегда задавайте точные размеры в пикселях для каждого элемента.
