Нотатки від команди про майстерність, формати та невеликі рішення, що стоять за гарною круглою обрізкою.
Двосмугова архітектура пояснена
Попередній перегляд на повзунку та кодування при завантаженні це два окремі шляхи коду. Попередній перегляд використовує нативний браузерний API canvas.toBlob, який працює синхронно на потоці GPU-композитора. Кожен рух повзунка викликає новий виклик canvas.toBlob із новим значенням якості, результат малюється в розділений canvas. Це повністю локально: ви можете перевірити це, відкривши DevTools, вкладку «Мережа», відфільтрувавши за compress і спостерігаючи, як жодних запитів не з'являється під час взаємодії з повзунком. Кнопка «Завантажити» запускає зовсім інший шлях коду. Вона надсилає POST оригінальний (незмінений) файл до нашого Cloudflare Worker за адресою /api/compress, який проксіює до сервера Fastify на Node 24 і пакеті sharp (ліцензія Apache 2.0), що спирається на libvips 8.x (LGPL-3.0). Закодований результат повертається в тілі відповіді та зберігається в папку завантажень браузера. Два шляхи, один інструмент.
Чому серверне кодування перемагає браузерне
Браузерний кодер JPEG використовує libjpeg або специфічну для браузера реалізацію, якій бракує налаштування таблиці субдискретизації колірності MozJPEG. MozJPEG, кодек, який libvips викликає для JPEG, був розроблений у Mozilla у 2014 році як заміна libjpeg-turbo з фокусом на створення менших файлів при тій самій сприйманій якості. У тестах на 50 різноманітних фотографіях (дика природа, портрети, продуктові знімки, скриншоти) кодування libvips і MozJPEG при якості 78 давало файли на 10-20 відсотків менші, ніж canvas.toBlob у Chrome при тому самому значенні якості. Для PNG різниця більша: браузер використовує zlib зі стандартним стисненням, тоді як pnpngquant скорочує палітру кольорів до мінімально потрібної, зазвичай зменшуючи неоптимізовані PNG-файли на 30-70 відсотків.
AVIF: що це таке і коли його використовувати
AVIF базується на внутрішньокадровому передбаченні відеокодека AV1, розробленого Alliance for Open Media. Він досягає кращої ефективності стиснення, ніж JPEG, передбачаючи значення пікселів у більших регіонах і представляючи залишок компактніше. Практичний результат полягає в тому, що файли AVIF при якості 60 часто візуально невідрізні від файлів JPEG при якості 80, будучи на 40-60 відсотків меншими. Компромісом є час кодування: на нашому сервері 8-мегапіксельне фото при якості 60 займає 3-8 секунд із libaom-av1. Підтримка браузерів сильна на 2026 рік (Chrome, Firefox, Safari, Edge декодують AVIF). Інструмент показує лічильник байтів AVIF у реальному часі поруч із JPG і WebP, тож ви можете вирішити, чи виправдовує економія розміру невелику затримку кодування для вашого робочого процесу.
Налаштування якості на практиці
Повзунок прямо мапиться на параметр q кодера для форматів із втратами. При якості 80 налаштування відповідає тому, що Adobe Photoshop позначає як High при експорті JPEG, і це стандарт, який використовує більшість професійних робочих процесів. При якості 60 середнє 4-мегапіксельне фото стискається приблизно до 200-400 КБ, достатньо мало для більшості електронної пошти та веб-використання, а втрата деталей помітна лише в зонах із тонкою текстурою при масштабі 1:1. Нижче якості 50 на гладких градієнтах і відтінках шкіри починають з'являтися квадратні артефакти стиснення, помітні навіть на нормальній відстані перегляду на ретина-екрані. Нижче якості 30 вихід впізнаваний, але явно стиснутий, придатний лише для попередніх переглядів мініатюр. Лічильник байтів над повзунком показує точний розмір виходу в КБ, поки ви перетягуєте, а не оцінку.
Видалення метаданих і чому це важливо
Обидві смуги видаляють EXIF, GPS і метадані камери з виходу за замовчуванням. Це коректна поведінка libvips і sharp у їхній стандартній конфігурації, і вона має два практичних ефекти. По-перше, вона видаляє потенційно чутливі дані про місцеперебування, вбудовані камерами смартфонів, що є плюсом для приватності зображень, поширюваних публічно. По-друге, вона трохи зменшує розмір файлу (типовий блок EXIF становить 10-40 КБ). Тег візуальної орієнтації обробляється окремо: інструмент читає поле орієнтації EXIF перед видаленням і попередньо повертає зображення, щоб вихід був правильно орієнтований. Якщо вам потрібно зберегти метадані для криміналістичних, архівних чи друкарських робочих процесів, вам слід використати спеціальний редактор метаданих перед стисненням.
Підтримувані формати: що входить і що виходить
Вхід приймає JPG, PNG, WebP і AVIF у кожному сучасному браузері, перевіряється за магічними байтами, а не лише за розширенням файлу. GIF приймається в Chrome і Firefox, але обробляється лише перший кадр (анімація не зберігається), тож анімовані GIF не слід стискати цим інструментом. HEIC з iPhone працює в Safari, який має вбудований нативний декодер HEIC, але Chrome і Firefox не декодують HEIC нативно. Вихід може бути JPG, PNG, WebP або AVIF незалежно від вхідного формату, тож ви також можете використовувати цей інструмент як одноетапний шлях конвертації та стиснення. Серверна смуга приймає файли до 25 МБ. Файли понад цей ліміт обробляються браузерним резервним кодером натомість.
