Оптимизация изображений

Определение: Оптимизация изображений — это набор действий, которые уменьшают “вес” картинок и ускоряют загрузку страницы без заметной потери качества (или с приемлемой), сохраняя правильные размеры и форматы.

Зачем это нужно

• Ускорить загрузку сайта, особенно на мобильных и при медленном интернете.
• Улучшить показатели производительности (в том числе LCP), что помогает и UX, и SEO.
• Снизить расход трафика для пользователей и нагрузку на сервер/CDN.
• Сделать страницы стабильнее: меньше “тяжёлых” запросов — меньше зависаний.
• Избежать размытых или “пережатых” картинок: качество контролируется, а не случайно теряется.
• Подготовить изображения под разные экраны: ретина, десктоп, мобильные.

Пример

Пример кода:

<img src="/images/product-800.webp" loading="lazy" alt="Кроссовки, вид сбоку">
<!-- До загрузки на сайт картинку приводят к нужному размеру (например, 800px по ширине) и сохраняют в WebP/AVIF с разумным качеством -->

Скриншот

Подпись к скриншоту: панель Network в DevTools: один и тот же блок страницы, где видно размер файла изображения и формат (до оптимизации и после оптимизации).

Частые ошибки

• Загружать “огромные” изображения (например, 4000px) и уменьшать их только через CSS — браузер всё равно скачает большой файл.
• Сохранять логотипы/иконки в JPG вместо SVG/PNG и терять чёткость.
• Пережать изображение “в ноль”: появляется мыло, артефакты, портится товарный вид.
• Не использовать современные форматы (WebP/AVIF) там, где это уместно.
• Ставить lazy-load на изображение первого экрана, из-за чего может ухудшиться LCP.

Связанные термины

• WebP
• AVIF
• Lazy Load
• Responsive images
• LCP
• CDN
• PageSpeed Insights

Наши услуги

• Доработка сайтов — внедряем правильные форматы, размеры и lazy-load, чтобы страницы загружались быстрее.
• SEO-продвижение сайтов — улучшаем технические показатели и скорость, которые влияют на видимость в поиске.
• Техническая поддержка сайта — настраиваем и контролируем оптимизацию медиа на постоянной основе.