Сжатие изображений онлайн — JPEG, PNG и WebP

Что такое сжатие изображений?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Ключевые возможности

JPEG, PNG и WebP

Примеры сжатия

photo-landscape.jpg (2,1 МБ, 4000×3000)

photo-landscape.jpg (680 КБ при качестве 75)

logo-transparent.png (43 КБ, 1200×800)

logo-transparent.png (19 КБ при качестве 80)

hero-banner.webp (800 КБ, 1920×1080)

hero-banner.webp (250 КБ при качестве 75)

Как сжимать изображения онлайн

1. 1

   Загрузите изображения

   Перетащите изображения в область загрузки или нажмите для выбора. Можно выбрать до 20 JPEG, PNG или WebP, каждый до 10 МБ.

2. 2

   Настройте качество

   Используйте ползунок качества для нужного уровня сжатия (0-100). По умолчанию 75 — хороший баланс. Размеры файлов и степени сжатия обновляются в реальном времени.

3. 3

   Скачайте результат

   Нажмите «Скачать» на отдельном файле или «Скачать всё», чтобы сохранить все сжатые изображения. Используйте «Сравнить» для визуальной проверки качества.

Сценарии использования

Оптимизация веб-производительности

Уменьшайте размеры изображений перед загрузкой на сайт. Меньшие изображения загружаются быстрее, улучшая Core Web Vitals (особенно Largest Contentful Paint), снижая трафик и улучшая SEO.

Уменьшение размера email-вложений

Сжимайте изображения перед прикреплением к email, чтобы оставаться в пределах лимитов (обычно 10-25 МБ). Партия из 20 фото часто сжимается с 50 МБ до менее 10 МБ.

Подготовка к загрузке в соцсети

Предварительное сжатие изображений перед загрузкой в соцсети. Хотя платформы пересжимают автоматически, начало с оптимально сжатого файла даёт больше контроля над финальным качеством.

Оптимизация ассетов приложений и игр

Сжимайте UI-ассеты, текстуры и спрайты для мобильных приложений, игр и PWA. Меньшие ассеты — быстрая загрузка, меньше хранилища и плавнее UX.

Оптимизация документов и презентаций

Уменьшайте размер изображений в PDF, Word-документах и презентациях. Слайдсет в 50 МБ с фотографиями высокого разрешения часто можно уменьшить до 10 МБ без заметной потери качества.

Технические детали

Сжатие через Canvas API

Инструмент использует метод toBlob() HTML5 Canvas API. Изображение рисуется на невидимом canvas, затем перекодируется с указанным параметром качества. Для JPEG и WebP параметр качества (0.0-1.0) управляет уровнем сжатия с потерями. Для PNG Canvas API игнорирует параметр качества полностью — PNG-кодирование через Canvas всегда без потерь.

Квантизация палитры PNG

Поскольку Canvas toBlob() игнорирует параметр качества для PNG, вывод PNG вообще не проходит через Canvas. Вместо этого изображение квантизуется к палитре цветов: ползунок качества задаёт размер палитры — качество 75 даёт 192 цвета — и результат записывается обратно как настоящий PNG с нетронутым альфа-каналом. Качество 100 соответствует перекодированию без потерь, которое не меняет ни одного пикселя. Если файл после квантизации не меньше оригинала, инструмент отбрасывает его и оставляет ваши исходные байты.

Поведение параметра качества

Ползунок качества отображается на параметр toBlob() Canvas: 100 = 1.0 (наивысшее качество, наибольший файл), 0 = 0.0 (низшее качество, наименьший файл). Для JPEG качество 75 (0.75) — обычно оптимум: ниже 50 артефакты становятся заметными. Для WebP то же значение даёт чуть меньшие файлы при сравнимом качестве.

Память браузера и лимиты

Каждое изображение существует в памяти как объект File оригинала и сжатый Blob, плюс два object URL для preview. С 20 изображениями по 10 МБ пиковое использование памяти достигает ~400 МБ. Object URL отзываются при очистке или закрытии страницы для предотвращения утечек памяти.

Лучшие практики

Начинайте с качества 75 для JPEG/WebP

Качество 75 — рекомендуемая стартовая точка для большинства сценариев. Обычно уменьшает размер на 60-80% с минимальной видимой потерей качества. Поднимайте выше 85 только когда сохранение деталей критично (медицинская визуализация, печать).

Используйте WebP, когда возможно

WebP даёт файлы на 25-35% меньше, чем JPEG при том же визуальном качестве, и поддерживает прозрачность как PNG. Все современные браузеры поддерживают WebP с 2024. Конвертируйте JPEG и PNG в WebP для лучшего соотношения сжатия и качества.

Сохраняйте оригиналы

Всегда сохраняйте оригинальные несжатые изображения как исходные. Сжатие с потерями необратимо — пересжатие уже сжатого изображения деградирует качество ещё больше без значительного уменьшения размера (известно как generation loss).

Проверяйте качество перед скачиванием

Используйте «Сравнить» для визуальной проверки артефактов сжатия перед скачиванием. Особое внимание — областям с текстом, резкими краями и тонкими градиентами — там JPEG-артефакты наиболее видны.

Группируйте похожие изображения

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

Часто задаваемые вопросы