Змінити розмір зображень _

Як працює зміна розміру зображень у браузері

Кожна зміна розміру — це короткий конвеєр, що виконується цілком у 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), щоб пакет було легко сортувати.

Перетягніть зображення, виберіть розмір, змініть. Усе виконується у вашій вкладці. Без завантажень, без облікового запису, без очікування у черзі сервера.