Конвертувати формати зображень _

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

Кожна конвертація — це чотирикроковий конвеєр, що повністю виконується у JavaScript. Жодна бібліотека кодеків не завантажується та жоден сервер не залучається. Canvas API браузера виконує декодування, зміну розміру та повторне кодування в пам'яті, потім передає Blob, який сторінка може або показати у попередньому перегляді, або запакувати у ZIP. Оскільки кожен крок виконується всередині пісочниці вкладки, оригінальні файли ніколи не досягають мережі.

1. Зчитування кожного завантаженого файлу як Blob та створення URL об'єкта, щоб браузер міг декодувати його локально, без копіювання байтів на сервер або збереження на диск.
2. Малювання декодованого зображення на позаекранний елемент Canvas із застосуванням будь-якого обмеження розміру при збереженні оригінальних пропорцій. Якщо ви вибрали максимальну ширину або максимальний розмір, саме тут відбувається масштабування.
3. Виклик canvas.toBlob(callback, targetMimeType, quality) для повторного кодування пікселів. Виведення PNG завжди є без втрат; JPEG та WebP враховують повзунок якості, що безпосередньо відображається на параметр квантування кодувальника.
4. Показ мініатюри до/після з вихідними розмірами та розміром файлу, потім надання кнопки завантаження для кожного зображення або єдиного ZIP для всього пакету. ZIP створюється в пам'яті за допомогою fflate — бібліотеки розміром 8 КБ, що повністю виконується у вкладці.

Навіщо конвертувати формати зображень?

• Перехід з PNG на WebP зазвичай скорочує розміри файлів на 25–35% без помітної втрати якості при якості 0.8, що безпосередньо знижує вагу сторінки та покращує показники Core Web Vitals LCP. На типовій сторінці з деталями товару з вісьмома головними зображеннями це різниця між першим рендерингом 4 МБ та 2,6 МБ.
• PNG зберігає прозорість там, де JPEG її відкидає. Перехід PNG у JPEG відображає прозорі пікселі на білому фоні — саме це потрібно, коли призначення (поштовий клієнт, старший CMS, шаблон для друку) взагалі не може прийняти PNG.
• Соціальні платформи та рекламні мережі мають суворі вимоги до формату. Facebook та LinkedIn надають перевагу JPEG для завантаження фотографій, конвеєр попереднього перегляду Twitter OG приймає WebP, а деякі програматичні рекламні сервери відхиляють все, що не є JPEG. Швидкий крок конвертації перед завантаженням уникає пінг-понгу відхилення креативів.
• Стандартизація пакету зображень у змішаних форматах (знімки екрана PNG, фотографії JPEG, експорти WebP від дизайнера) до єдиного вихідного формату перед завантаженням до CMS або DAM видаляє гілки обробки форматів з конвеєра прийому. Один формат на вході, один формат на виході, набагато менше умовних шляхів коду нижче по ланцюгу.

Поширені застосування

Конвертація форматів виникає щоразу, коли вихідний формат і очікування призначення не збігаються. Три шаблони, що ми бачимо знову і знову.

• Підготовка фотографій товарів для магазину Shopify або WooCommerce. Оригінали JPEG конвертуються у WebP з якістю 0,85 для публічного вітрину магазину, тоді як копії PNG зберігаються для готових до друку експортів та ринкових лістингів, що все ще відхиляють WebP.
• Конвертація наданих дизайнером PNG-експортів у JPEG або WebP перед їх надходженням до збірки React або Next.js. Конвеєр зображень фреймворку отримує менше джерело, і виробничий пакунок постачає менше байтів для кожного маршруту.
• Пакетна обробка папки знімків екрана з QA-тестування. PNG у JPEG з якістю 0,9 зазвичай зменшує архів із 50 знімків екрана приблизно з 120 МБ до менш ніж 20 МБ перед прикріпленням до квитка в системі відстеження помилок.

Практичний приклад: PNG 2 МБ у WebP 300 КБ

Головне зображення PNG розміром 2 МБ при 2400×1600 пікселів є типовим корисним навантаженням на маркетингових цільових сторінках. Це справедливий орієнтир для того, що конвертація економить на реальній сторінці.

Перетягніть PNG у зону завантаження, виберіть WebP як цільовий формат, встановіть якість 0.8 та максимальну ширину 1200 для зменшення розміру пікселів вдвічі. Конвеєр Canvas малює зображення при 1200×800 зі збереженням пропорцій, потім повторно кодує у WebP. Картка результату показує підсумок, зазвичай у діапазоні 280–320 КБ — приблизно 85% скорочення відносно оригіналу. Натисніть Завантажити на картці, щоб отримати окремий файл, або натисніть Завантажити .zip внизу панелі, якщо ви конвертували кілька зображень за один прохід. Весь цикл — від перетягування до завантаження — займає кілька сотень мілісекунд для зображення такого розміру та споживає нульову пропускну здатність після завершення завантаження самої сторінки.

Які формати підтримуються?

На стороні введення приймається будь-який формат, який може декодувати браузер: PNG, JPEG, WebP, GIF та BMP охоплюють практично кожен файл, що виробляє дизайнер або інструмент для знімків екрана. Вихідні формати — PNG (завжди без втрат), JPEG та WebP. Виведення AVIF наразі не підтримується, оскільки AVIF-кодувальник Canvas API присутній лише у Chrome 105 і пізніших версіях та відсутній у Safari та Firefox. Шлях AVIF на основі WebAssembly запланований для версії v1.1, щоб функція працювала в кожному сучасному браузері.

Чи це відбувається на моєму пристрої?

Так, повністю. Сторінка використовує нативний Canvas API браузера та Web File API для декодування та повторного кодування кожного зображення в пам'яті. Жодні дані зображення не надсилаються на сервер, без тимчасового завантаження, без хмарного циклу. Ви можете перевірити це самостійно: відкрийте DevTools, перейдіть на панель Network та запустіть конвертацію. Єдині вихідні запити, які ви побачите, — це початкове завантаження сторінки та рекламні виклики. Нічого у вигляді зображень не залишає вкладку.

Який компроміс якості між PNG та JPEG?

PNG є форматом без втрат. Кожен піксель точно переживає цикл кодування, що робить PNG правильним вибором для знімків екрана, UI-захоплень та будь-якого зображення з чіткими краями або великими плоскокольоровими ділянками. JPEG використовує стиснення DCT та відкидає дрібні деталі, які людське oko рідко помічає — це правильний вибір для фотографій. Якість 0.8 є поширеною золотою серединою, де візуальна різниця від оригіналу важко помітна, але файл у 4–6 разів менший за еквівалент PNG. WebP може працювати в обох режимах — без втрат та з втратами; повзунок якості тут керує кодувальником з втратами, і при якості 0.85 WebP зазвичай перевершує JPEG на 25–30% для вмісту з природними фото.

Коли з'явиться підтримка AVIF?

Кодування AVIF через canvas.toBlob(…, 'image/avif') сьогодні працює лише у Chrome 105 і пізніших версіях; Safari та Firefox не підтримують його нативно. Версія v1.1 додасть опціональний шлях AVIF з використанням легкого WebAssembly-кодувальника, щоб функція працювала в кожному сучасному браузері без очікування нативного паритету. До того часу опція AVIF у виборі формату відображається як «незабаром», а WebP-кодувальник є рекомендованою альтернативою. WebP підтримується кожним браузером, випущеним з 2021 року, і дає файли в межах 10–20% від розміру AVIF для більшості реальних зображень.

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