Изменить размер изображений _

Как работает изменение размера изображений в браузере

Каждое изменение размера — это короткий конвейер, работающий целиком на JavaScript. Библиотеки кодеков не загружаются, сервер не задействован. Браузерный Canvas API декодирует файл, перерисовывает его в нужном размере, перекодирует в памяти и передаёт вам Blob, который страница может показать в предпросмотре или запаковать в zip. Поскольку каждый шаг выполняется внутри песочницы вкладки, исходные файлы никогда не выходят в сеть.

1. Считывает каждый загруженный файл как Blob и создаёт объектный URL, чтобы браузер мог декодировать его локально, без копирования байтов на сервер или записи на диск.
2. Вычисляет целевые размеры по выбранному режиму — ограничение длинной стороны, точная ширина и высота или процентный масштаб. Блокировка соотношения сторон сохраняет пропорции при редактировании одного поля.
3. Создаёт внеэкранный Canvas нужного размера и вызывает ctx.drawImage(source, 0, 0, width, height) для перерисовки пикселей. Браузер выполняет интерполяцию, сглаживающую масштабированный результат.
4. Вызывает canvas.toBlob для перекодирования в исходный формат. PNG остаётся без потерь, JPEG и WebP перекодируются с высоким качеством. Затем страница показывает карточку до/после и предлагает скачать отдельное изображение или ZIP-архив из памяти с помощью fflate.

Зачем изменять размер изображений?

• Изображения с избыточным разрешением — самая частая причина медленных страниц. Фото 4000×3000 прямо с телефона в 600-пиксельном макете несёт примерно в 40 раз больше пикселей, чем нужно экрану. Ограничение длинной стороны до 1600 пкс перед загрузкой резко снижает вес страницы и улучшает LCP в Core Web Vitals.
• Формы загрузки требуют точных размеров. Аватары, порталы для документов, площадки для объявлений и OG-карты имеют строгие требования: 1200×630 для превью Open Graph, 512×512 для иконки приложения, 150×150 для миниатюры. Точное совпадение избавляет от цикла отклонённых загрузок.
• Инструменты электронной почты и чаты незаметно перекомпрессируют крупные вложения, что может испортить чистый скриншот. Самостоятельное изменение размера даёт предсказуемый результат вместо того, чтобы доверять чужому конвейеру с потерями.
• Пакетная унификация важна для галерей и каталогов. Обработка папки с фотографиями разных размеров через единую цель 800×800 означает, что каждая карточка выровнена по сетке без случайных крупных изображений, ломающих макет.

Типичные сценарии использования

Изменение размера требуется везде, где исходные размеры и ожидания получателя не совпадают. Три шаблона встречаются снова и снова.

• Подготовка фотографий товаров для магазина Shopify или WooCommerce. Папка с 4000-пиксельными оригиналами ограничивается длинной стороной 1600 пкс, чтобы витрина загружалась быстро, а соотношение сторон сохраняется — ничего не выглядит растянутым.
• Создание социальных и рекламных материалов из одного мастер-файла. Задайте точный размер 1200×630 для OG-карты, затем 512×512 для иконки приложения — каждый вариант экспортируется за пару кликов без тяжёлого редактора.
• Уменьшение пакета скриншотов QA или технической поддержки перед прикреплением к тикету. Масштабирование папки из 50 снимков до 50% как правило сокращает архив примерно в четыре раза перед отправкой в баг-трекер.

Практический пример: фото 4000 пкс до веб-изображения 1600 пкс

Фото 4000×3000, снятое на телефон, — типичная нагрузка, намного превышающая потребности любого веб-макета. Это хороший ориентир для того, что даёт изменение размера.

Перетащите фото в зону загрузки, оставьте режим на Ограничить длинную сторону и задайте значение 1600. Конвейер Canvas перерисует изображение в размере 1600×1200 с сохранением соотношения сторон и перекодирует в исходный формат. На карточке вывода показаны новые размеры и размер файла — для типичного JPEG он падает с нескольких мегабайт до нескольких сотен килобайт. Нажмите Скачать на карточке, чтобы получить один файл, или нажмите Скачать .zip, если вы изменили размер нескольких изображений за один проход. Весь цикл — от перетаскивания до скачивания — занимает доли секунды и не использует пропускную способность после загрузки страницы.

Какие режимы изменения размера доступны?

Три. Ограничить длинную сторону — ограничивает большую из ширины или высоты заданным числом пикселей и масштабирует другую сторону соответственно; это безопасный вариант по умолчанию, поскольку он никогда не искажает. Точная ширина × высота — позволяет ввести оба числа; блокировка соотношения сторон пересчитывает второе поле из исходного соотношения при редактировании первого — отключите блокировку, когда форма требует точного непропорционального размера. Масштаб в процентах — умножает оба размера на один множитель, удобно для уменьшения или удвоения целого пакета сразу. Шесть пресетов одним кликом (от 1920×1080 до миниатюры 150×150) охватывают самые распространённые цели.

Всё происходит на моём устройстве?

Да, полностью. Страница использует нативный Canvas API браузера и Web File API для декодирования, перерисовки и перекодирования каждого изображения в памяти. Данные изображений не отправляются на сервер, нет временной загрузки и нет облачного цикла. Вы можете проверить это: откройте DevTools, перейдите на панель Network и запустите изменение размера. Единственные исходящие запросы — начальная загрузка страницы и рекламные вызовы. Ничего похожего на изображение не покидает вкладку, что делает этот инструмент безопасным для сканов документов, медицинских снимков и других материалов, которые нельзя загружать.

Снижает ли изменение размера качество?

Уменьшение изображения (downscaling) выглядит отлично — браузер усредняет исходные пиксели в меньшее количество, поэтому детализация остаётся чёткой, а файл становится значительно меньше. Увеличение сверх исходного разрешения (upscaling) не может создать детали, которых никогда не было, поэтому маленькое изображение, увеличенное вверх, будет выглядеть размытым — это ограничение любого инструмента, не только этого. Результат сохраняет исходный формат: PNG остаётся без потерь, JPEG и WebP перекодируются с высоким качеством, так что визуальное отличие от оригинала трудно заметить.

Какие форматы файлов поддерживаются?

На входе принимается любой формат, который браузер может декодировать: PNG, JPEG, WebP, GIF и BMP покрывают почти все файлы, которые производит телефон, камера или инструмент для скриншотов. Вывод сохраняет исходный формат там, где кодировщик Canvas его поддерживает — PNG, JPEG и WebP проходят напрямую. GIF и BMP, которые Canvas API может декодировать, но не может перекодировать, сохраняются как PNG без потерь. В имя файла с изменённым размером включаются новые размеры (например, photo-1600x1200.jpg), чтобы пакет было легко сортировать.

Перетащите изображения, выберите размер, измените. Всё работает в вашей вкладке. Без загрузки, без аккаунта, без ожидания в очереди сервера.