Інструменти для обробки графіки та відео в браузері

По мотивам спілкування з Владом (@vladdevelop) щодо оптимізації зображень.

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

Ця операція звісно не безкоштовна для сервера. Я подумав, що клієнти в нас настільки потужні, що нема потреби робити цю операцію на сервері адже можно загружати вже оптимізовані зображення.

Пішов пошукати рішення і знайшов browser-image-compression (демонстрація процеса зжимання на клієенті доступне за посиланням). Цікаве те, що використовується окремий потік у веб-воркері, що не блокує основний потік у якому працюють скріпти сторінки. Це означає, що на сторінці нічого не буде лагати поки відбувається ресайз.

Далі я подумав щодо GIF, бо самі по собі гфіки важать більше ніж відео і було б класно перегоняти GIF у відео на клієнті і завантажувати меньший обʼєм інформації. І швидко таких оптимізаторів не знайшлося. Але я подумав про ffmpeg, чим зазвичай роблять різні операції з відео. І тут я швидко натрапив на ffmpeg на WebAssembly, який працює (я тестував перекодування GIF у MP4).

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