Пакетное сжатие изображений для веб-разработчиков | Bulk Image Compressor

Published December 18, 2025

Изображения — это самые тяжелые ресурсы на большинстве сайтов. В среднем на странице они занимают от 40 до 60% общего веса. Если вы веб-разработчик и не сжимаете изображения, вы поставляете раздутые страницы, независимо от того, насколько чист ваш код.

Вопрос не в том, нужно ли сжимать. Вопрос в том, на каком этапе вашего рабочего процесса должно происходить сжатие и какой инструмент подходит для каждой ситуации.

Где сжатие изображений вписывается в рабочий процесс разработчика

Есть три основных этапа, на которых вы можете сжимать изображения во время разработки:

Перед коммитом. Вы оптимизируете изображения локально до того, как они попадут в систему контроля версий. Это сохраняет ваш репозиторий легким и гарантирует, что все окружения (стейджинг, продакшн, машины других разработчиков) автоматически получат оптимизированные версии.

Во время сборки. Инструменты сборки, такие как Vite или webpack, обрабатывают сжатие как часть пайплайна ресурсов. Исходные изображения остаются в полном качестве в репозитории, а процесс сборки генерирует оптимизированные версии для развертывания.

На уровне CDN. Сервисы, такие как Cloudflare, Imgix или Cloudinary, преобразуют и сжимают изображения на лету в зависимости от устройства и браузера посетителя.

У каждого подхода есть компромиссы, и вы можете комбинировать их.

Онлайн-инструменты против плагинов сборки

Для быстрой разовой задачи, такой как сжатие пачки скриншотов для поста в блоге или оптимизация набора иконок, онлайн-инструмент — самый быстрый вариант. Откройте Bulk Image Compressor, перетащите файлы, настройте качество и скачайте. Готово меньше чем за минуту.

Плагины сборки автоматически выполняют постоянную оптимизацию. Вот как это выглядит на практике.

Vite

Пользователи Vite могут использовать vite-plugin-imagemin или аналогичные плагины:

// vite.config.js
import imagemin from 'vite-plugin-imagemin';

export default {
  plugins: [
    imagemin({
      mozjpeg: { quality: 80 },
      webp: { quality: 80 },
      pngquant: { quality: [0.7, 0.8] },
    }),
  ],
};

Это сжимает изображения во время vite build. Исходные файлы остаются нетронутыми. В выходную директорию попадают оптимизированные версии.

webpack

С webpack ту же работу выполняет image-minimizer-webpack-plugin:

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: { quality: 80 },
              webp: { quality: 80 },
            },
          },
        },
      }),
    ],
  },
};

Когда что использовать

Используйте онлайн-инструмент когда:

Вы добавляете несколько изображений в проект и хотите оптимизировать их прямо сейчас
Вы работаете с контентом от клиента или дизайнера, который прислал неоптимизированные файлы
В вашем проекте нет этапа сборки (статический HTML, простые сайты)
Вы хотите визуально проверить результаты сжатия перед коммитом

Используйте плагины сборки когда:

В вашем проекте уже есть пайплайн сборки
Несколько разработчиков добавляют изображения, и вам нужна единообразная оптимизация
Вам нужно преобразование форматов (например, автоматическая генерация WebP)
Вы хотите хранить исходные изображения в полном качестве в репозитории для возможной будущей переработки

CI/CD оптимизация изображений

Плагины сборки работают во время локальных сборок, но вы также можете добавить оптимизацию изображений в ваш CI/CD пайплайн. Это перехватывает неоптимизированные изображения, которые проскочили, независимо от того, кто их закоммитил.

Простой подход — запустить скрипт в вашем CI пайплайне, который проверяет размеры файлов изображений:

# Завершить сборку ошибкой, если любое изображение больше 500KB
find public/images -type f \( -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -size +500k | tee oversized.txt
if [ -s oversized.txt ]; then
  echo "Найдены изображения превышающие размер. Сожмите перед развертыванием."
  exit 1
fi

Для автоматического сжатия в CI такие инструменты, как sharp-cli или imagemin-cli, могут обрабатывать изображения как этап сборки. Это гарантирует, что ничего не попадет в продакшн несжатым.

Ленивая загрузка и адаптивные изображения

Одного сжатия недостаточно. То, как вы загружаете изображения, имеет не меньшее значение.

Ленивая загрузка откладывает загрузку изображений за пределами экрана до тех пор, пока пользователь не прокрутит до них. Добавьте loading="lazy" к каждому изображению ниже сгиба. Не применяйте ленивую загрузку к вашему hero-изображению или любому контенту, который виден при начальной загрузке страницы, так как это ухудшит показатель Largest Contentful Paint.

Адаптивные изображения предоставляют разные размеры в зависимости от ширины экрана. Телефону не нужно изображение 2400px, предназначенное для монитора. Используйте атрибуты srcset и sizes, чтобы браузер выбрал подходящую версию:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1600px"
  alt="Фото товара"
  width="1600"
  height="1067"
  loading="lazy"
>

Генерируйте эти варианты размеров как часть процесса сборки или с помощью пакетного инструмента перед загрузкой.

Доставка через CDN

CDN (Сеть доставки контента) обслуживает изображения с серверов, географически близких к вашим посетителям. Это уменьшает задержку, но некоторые CDN идут дальше, предлагая оптимизацию изображений на лету.

Cloudflare Image Resizing может изменять размер и конвертировать изображения в WebP или AVIF автоматически в зависимости от браузера посетителя. Вам не нужно генерировать варианты самостоятельно.

Imgix и Cloudinary — это специализированные CDN для изображений. Вы загружаете один высококачественный источник, а они генерируют любой размер, формат и качество по вашему запросу через параметры URL. Это мощно, но добавляет стоимость за каждое изображение.

Для большинства проектов достаточно сжимать изображения перед загрузкой и обслуживать их через стандартный CDN (Cloudflare, Fastly, AWS CloudFront). Специализированные CDN для изображений имеют смысл, когда у вас есть тысячи изображений, загружаемых пользователями, и требуется динамическое изменение размеров. Для понимания основ того, почему сжатие важно для веб, наше руководство почему изображения на сайте нуждаются в сжатии охватывает основы.

Распространенные ошибки разработчиков

Коммит неоптимизированных изображений. JPEG размером 5МБ остается в вашем репозитории в истории git навсегда, даже если вы замените его позже. Сжимайте перед коммитом.

Использование PNG для фотографий. PNG предназначены для графики, скриншотов и изображений с прозрачностью. Фотография, сохраненная в PNG, обычно в 3-5 раз больше, чем то же изображение в JPEG или WebP. Используйте правильный формат для типа контента. Ознакомьтесь с нашим сравнением форматов для подробностей.

Пропуск атрибутов ширины и высоты. Без явных размеров браузер не знает, сколько места зарезервировать под изображение, пока оно не загрузится. Это вызывает сдвиги макета, что ухудшает показатель CLS и раздражает пользователей.

Чрезмерное сжатие. Снижение качества до 30 или 40% для получения крошечных файлов приводит к видимым артефактам. Для веб-изображений качество 75-82% обеспечивает правильный баланс между размером и внешним видом.

Игнорирование размеров изображения. Сжатие фото 4000px с качеством 80% — это хорошо, но если оно отображается шириной 600px на вашей странице, вы все равно отправляете гораздо больше пикселей, чем нужно. Сначала измените размер до нужных размеров, затем сжимайте.

Неиспользование WebP. Поддержка WebP в браузерах теперь повсеместна. Если вы все еще используете исключительно JPEG и PNG, вы теряете 25-35% экономии размера файлов.

Практический подход

Для большинства веб-проектов хорошо работает следующее:

Изменяйте размер и сжимайте изображения перед коммитом, используя онлайн-инструмент, такой как Bulk Image Compressor, или локальный скрипт.
Добавьте плагин сборки в качестве подстраховки, чтобы перехватить то, что проскочило.
Используйте ленивую загрузку и адаптивные изображения в вашем HTML.
Обслуживайте через CDN.

Вам не нужно делать все четыре пункта с первого дня. Начните с первого шага. Уже это заметно повлияет на скорость загрузки ваших страниц.

Ready to compress your images?

Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.

Try Bulk Image Compressor