Як працює стиснення зображень у браузері
Кожен прохід стиснення виконується цілком у JavaScript. Жодна бібліотека кодеків не завантажується, і жоден сервер не залучається. Власний Canvas API браузера декодує зображення, повторно кодує його з нижчою якістю та передає вам Blob, який сторінка може показати у попередньому перегляді, завантажити чи запакувати у zip. Оскільки кожен крок лишається всередині пісочниці вкладки, оригінальні файли ніколи не торкаються мережі.
- Зчитує кожен завантажений файл як Blob і створює об'єктний URL, щоб браузер міг декодувати його локально, без копіювання байтів на сервер чи запису на диск.
- Малює декодоване зображення на позаекранному елементі Canvas у його оригінальних піксельних розмірах, готове до повторного кодування.
- Викликає
canvas.toBlob(callback, mimeType, quality)для повторного кодування пікселів. У режимі якості значення повзунка безпосередньо відображається на параметр квантування кодувальника; у режимі цільового розміру сторінка ділить навпіл значення якості, доки вихідний blob не вміститься у ваш бюджет у байтах. - Показує зведення до/після з оригінальним розміром, стиснутим розміром та відсотком заощадження, потім пропонує завантаження для кожного зображення чи єдиний ZIP для всієї партії. ZIP створюється в пам'яті за допомогою fflate — бібліотеки розміром 8 КБ, що завантажується під час першого використання.
Навіщо стискати зображення?
- Менші зображення завантажуються швидше. Зменшення головного зображення з 4 МБ до 600 КБ безпосередньо покращує Largest Contentful Paint — один із показників Core Web Vitals, які Google використовує для ранжування. На сторінці з кількома світлинами заощадження складається у швидший перший рендеринг.
- Потім є ліміти завантаження. Безліч платформ CMS, систем тикетів та поштових систем відхиляють усе, що перевищує 1 чи 2 МБ, а швидкий прохід стиснення вкладає світлину в ліміт без відкриття повноцінного редактора.
- Пропускна здатність і сховище коштують грошей у масштабі. Надсилання WebP з якістю 0.8 замість повнорозмірного PNG може скоротити вагу зображень на третину чи більше, що знижує рахунки за вихідний трафік CDN та витрату мобільного трафіку для ваших відвідувачів.
- Деякі зображення взагалі не слід завантажувати. Оскільки тут усе працює у вашому браузері, скани документів, медичні знімки та внутрішні знімки екрана лишаються на вашому пристрої. У ланцюжку немає стороннього сервера на кшталт TinyPNG, про який варто було б турбуватися.
Поширені застосування
Стиснення виникає щоразу, коли зображення більше за місце, куди воно прямує. Три шаблони, що ми бачимо знову і знову.
- Підготовка світлин товарів для інтернет-магазину. JPEG-оригінали стискаються до якості 0.8 (або цілі 200 КБ), щоб вітрина лишалася швидкою та проходила Core Web Vitals на мобільних пристроях.
- Зменшення знімків екрана перед прикріпленням до системи відстеження помилок чи вікі. Пакет PNG-знімків, конвертованих у JPEG з якістю 0.85, часто падає з десятків мегабайтів до пари.
- Вкладання світлини в ліміт завантаження — портал подання заявок на роботу, що відхиляє файли понад 1 МБ, поштова система з жорстким лімітом вкладень або аватар на форумі, який має вміститися в бюджет за байтами.
Практичний приклад: JPEG 4 МБ до 400 КБ
JPEG розміром 4 МБ просто з камери телефона — поширене навантаження, що перевищує ліміти завантаження та сповільнює сторінки. Це справедливий орієнтир для того, що заощаджує стиснення.
Перетягніть JPEG у зону завантаження, залиште формат на JPEG і або посуньте повзунок якості вниз до 0.7, або перемкніться в режим цільового розміру та введіть 400 КБ. У режимі якості конвеєр Canvas повторно кодує один раз і показує результат, зазвичай близько 500–700 КБ залежно від світлини. У режимі цільового розміру сторінка пробує кілька значень якості, зупиняється на найвищому, яке все ще вміщається під 400 КБ, і повідомляє відсоток заощадження. Натисніть Завантажити на картці, щоб отримати окремий файл, або натисніть Завантажити .zip, якщо ви стиснули кілька зображень одразу. Весь цикл виконується значно менше ніж за секунду для зображення такого розміру та споживає нульову пропускну здатність після того, як сама сторінка завершила завантаження.
У чому різниця між режимом якості та режимом цільового розміру?
Режим якості дає вам один повзунок від 0.1 до 1.0, що відображається на параметр квантування кодувальника JPEG чи WebP — менші числа означають менші файли та помітніші артефакти. Режим цільового розміру перевертає задачу: ви називаєте розмір у кілобайтах, і сторінка ділить навпіл значення якості, кодуючи кілька разів, доки не знайде найвищу якість, яка все ще вміщається у ваш бюджет. Режим цільового розміру зручний, коли важливий жорсткий ліміт (скажімо, ліміт завантаження 1 МБ); режим якості швидший і кращий, коли вам просто потрібен передбачуваний візуальний результат. PNG є форматом без втрат, тож жоден режим до нього не застосовується.
Чи це відбувається на моєму пристрої?
Так, цілком. Сторінка використовує нативний Canvas API браузера та Web File API для декодування та повторного кодування кожного зображення в пам'яті. Жодні дані зображення не надсилаються на сервер, немає тимчасового завантаження та немає хмарного циклу. Ви можете перевірити це самостійно: відкрийте DevTools, перейдіть на панель Network та запустіть стиснення. Єдині вихідні запити, які ви побачите, — це початкове завантаження сторінки та рекламні виклики. Нічого схожого на зображення не залишає вкладку.
Чому стиснення PNG іноді ледь зменшує його?
PNG — формат без втрат, тож Canvas API не може відкинути деталі, щоб зробити його меншим — він може лише заново упакувати ті самі пікселі. Для світлин PNG уже великий, і повторне кодування без втрат заощаджує мало. Справжній виграш приходить від зміни формату виведення на JPEG чи WebP, які використовують стиснення з втратами, придатне для світлин, і зазвичай виявляються в 4–10 разів меншими. Зберігайте PNG лише тоді, коли вам потрібна якість без втрат чи прозорість; інакше обирайте JPEG для світлин або WebP для найкращого балансу розміру та якості.
Який формат обрати?
Для світлин WebP з якістю 0.8 дає найкращий баланс розміру та якості й підтримується кожним браузером, випущеним з 2021 року; JPEG — безпечний універсальний запасний варіант, коли призначення старіше чи суворіше. Обирайте PNG лише тоді, коли вам потрібна якість без втрат чи альфа-канал — штрихова графіка, знімки інтерфейсу, логотипи з прозорістю. Якщо ви оптимізуєте під швидкість сторінки, а ваша аудиторія користується сучасними браузерами, WebP майже завжди правильний вибір; якщо ви живите старий CMS чи друкарський конвеєр, що відхиляє WebP, дотримуйтеся JPEG.
Перетягніть зображення, виберіть рівень якості чи цільовий розмір, стисніть. Усе працює у вашій вкладці. Без завантажень, без облікового запису, без очікування у черзі сервера.