【20250622】クライアントサイドで_ 高品質画像圧縮したいからウェブアプリ版 Squoosh参照してwasmに手を出す

間違いあったら優しく教えてください

Transcript

1. クライアントサイドで 高品質画像圧縮したいから ウェブアプリ版 Squoosh 参照してwasmに手を出す 2025/06/22 あさりんご
2. 徒然なるままに… wasmとの出会いを振り返る 結論ありきの順番ではなく、 探索していった時の順番で話してみる （スピーチ結論から話せと言われがちだけどほんとかな？ ということでお試ししてみる）
3. Squoosh Googleが提供しているオープンソースの高品質画像圧縮アプリ ⇒今回はこのオープンソースから、mozjpeg(C言語の高品質画像 圧縮ライブラリ)をwasmにしてjsから呼べるようにしてみる
4. ここっぽい
5. すでにwasmのファイルあるっぽいけど、 生成方法は…? ( ﾟДﾟ) こやつか！ 名前的に！
6. ぐっ… _(´ཀ`」 ∠)_
7. いったん理解より動かすの優先でいこ Emscriptenを使えるようにするぞ☆ bashで以下コマンドどん git clone https://github.com/emscripten-core/emsdk.git cd /mnt/c/Users/[お名前]/source/repos/emsdk ./emsdk install latest ./emsdk activate latest source ./emsdk_env.sh 動かしてくうちにわかってくるだろ… ^^) _旦~~
8. MakefileをEmscriptenに読ませるぞ bashで以下コマンドどん git clone https://github.com/GoogleChromeLabs/squoosh.git cd /mnt/c/Users/[お名 前]/source/repos/squoosh/codecs/mozjpeg/ emmake make 最初makeだけで打っててうまくいかずなんでや…? とかなってた思ひ出 Emscriptenつかうのだから、それ用のコマンドを！
9. あれ足りないこれ足りない言われる エラー文言に従ってとにかく sudo apt update && sudo apt install [パッケージ名]
10. できたので使ってみる 生成されたmozjpeg_enc.js ⇒約3000行のコード(;´∀｀)ｺﾚﾓｳﾜｶﾝﾈｴﾅ このjsどうやって使うんや… いったんexportとかないかな ⇒最後の行にexport default Moduleあった ⇒多分importして使えばいいけど、何のメソッドが使えるんや…
11. これなに？
12. mozjpeg_enc.cpp⇒バインドファイル Makefileに指定ある バインドファイルを自由に書き換えて何を生成するか決められるんだ jsから何が呼び出せるものかはここ見ればわかるんだ！ mozjpeg_enc.cpp Makefile
13. Mozjpeg_enc.cpp内のコメント • // The code below is basically the `write_JPEG_file` function from • // https://github.com/mozilla/mozjpeg/blob/master/example.c • // I just write to memory instead of a file. ここ肝である感 I just wirteとかいってるけどめっちゃ大事なことしてくれてる... そこにしびれるあこがれる...☆
14. 使ってみる 生成したmozjpeg_enc.jsとmozjpeg_enc.wasmを 使用したいプロジェクトに連れていく import MozjpegEnc from [ファイルの場所] const mozjpegEnc = await MozjpegEnc(); const result = mozjpegEnc.encode([画像],[画像の横幅],[画像の 縦幅],[オプション]) ※詳しくはmozjpeg_enc.cpp参照
15. CanvasAPIで画像圧縮したのと 見た目品質あんま変わらんのやが…(^_^;) • CanvasAPIが使用するのはブラウザ内蔵のjpegエンコーダ/デ コーダ（具体的な実装不明） ⇒こやつ…そこそこ優秀なのでは • オプションをもう少しちゃんといじればよくなる？ • そしてCanvasAPIのほうでOKとなったので、 難しいmozjpegとはバイバイしました。
16. いろいろ新体験 • Emscriptenをつかってみること • chatGPTヘルプもらいつつオープンソースのコードを見てみること • オープンソースから拝借してくること（していいんだ！） • C++に触れる • 個人がGitHubにコードを公開する意味を知る（今度やってみよう）