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

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

Кожне перетворення — це чотириетапний конвеєр, що працює у вашому браузері. Для JPEG та PNG власний Canvas API браузера виконує кодування безпосередньо. Для WebP у Safari та AVIF у будь-якому браузері сторінка завантажує легкий кодек WebAssembly на вимогу — все одно все локально, ваші зображення ніколи не залишають пристрій.

1. Зчитування кожного завантаженого файлу як Blob та створення URL об'єкта, щоб браузер міг декодувати його локально, без копіювання байтів на сервер або збереження на диск.
2. Малювання декодованого зображення на позаекранний елемент Canvas із застосуванням будь-якого обмеження розміру при збереженні оригінальних пропорцій. Якщо ви вибрали максимальну ширину або максимальний розмір, саме тут відбувається масштабування.
3. Викличте canvas.toBlob(callback, targetMimeType, quality) для перекодування пікселів для PNG, JPEG та Chrome/Firefox WebP. Для Safari WebP та кодування AVIF при першому використанні завантажується воркер кодека WebAssembly, який виконує кодування у фоновому потоці. Вивід PNG завжди без втрат; JPEG, WebP та AVIF враховують повзунок якості, який безпосередньо відображається на налаштування квантування кодувальника.
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 підтримується через кодувальник WebAssembly, який завантажується на вимогу в будь-якому браузері — власний кодувальник Canvas не потрібен.

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

Так, повністю. Сторінка використовує нативний 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 використовує кодек WebAssembly, який завантажується на вимогу при першому виборі формату AVIF — без плагінів, без прапорців браузера, без очікування майбутнього випуску Chrome. Бінарний файл WASM подається з нашого власного джерела, кодує ваше зображення повністю у фоновому потоці та повертає стандартний blob image/avif, готовий до завантаження. Єдиний мережевий запит — це одноразове завантаження самого кодека; жодні дані зображення ніколи не залишають ваш пристрій. Після завантаження кодувальник залишається в кеші на час сесії, тому наступні перетворення виконуються швидше. Файли AVIF зазвичай на 20-30% менші за WebP та на 50% менші за JPEG при еквівалентній якості, що робить їх найкращим вибором для сайтів, чутливих до продуктивності.

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