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

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

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

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

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

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

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