Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
【20250622】クライアントサイドで_ 高品質画像圧縮したいからウェブアプリ版 Squoo...
Search
asaringo
June 25, 2025
Programming
0
40
【20250622】クライアントサイドで_ 高品質画像圧縮したいからウェブアプリ版 Squoosh参照してwasmに手を出す
間違いあったら優しく教えてください
asaringo
June 25, 2025
Tweet
Share
More Decks by asaringo
See All by asaringo
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
230
Other Decks in Programming
See All in Programming
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
370
PHPカンファレンス関西2025 基調講演
sugimotokei
5
1k
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
140
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
750
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
MCPで実現できる、Webサービス利用体験について
syumai
7
2.2k
型で語るカタ
irof
1
850
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
710
リッチエディターを安全に開発・運用するために
unachang113
1
270
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
360
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Six Lessons from altMBA
skipperchong
28
3.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How to Ace a Technical Interview
jacobian
278
23k
Balancing Empowerment & Direction
lara
1
510
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Code Reviewing Like a Champion
maltzj
524
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
クライアントサイドで 高品質画像圧縮したいから ウェブアプリ版 Squoosh 参照してwasmに手を出す 2025/06/22 あさりんご
徒然なるままに… wasmとの出会いを振り返る 結論ありきの順番ではなく、 探索していった時の順番で話してみる (スピーチ結論から話せと言われがちだけどほんとかな? ということでお試ししてみる)
Squoosh Googleが提供しているオープンソースの高品質画像圧縮アプリ ⇒今回はこのオープンソースから、mozjpeg(C言語の高品質画像 圧縮ライブラリ)をwasmにしてjsから呼べるようにしてみる
ここっぽい
すでにwasmのファイルあるっぽいけど、 生成方法は…? ( ゚Д゚) こやつか! 名前的に!
ぐっ… _(´ཀ`」 ∠)_
いったん理解より動かすの優先でいこ 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 動かしてくうちにわかってくるだろ… ^^) _旦~~
MakefileをEmscriptenに読ませるぞ bashで以下コマンドどん git clone https://github.com/GoogleChromeLabs/squoosh.git cd /mnt/c/Users/[お名 前]/source/repos/squoosh/codecs/mozjpeg/ emmake make
最初makeだけで打っててうまくいかずなんでや…? とかなってた思ひ出 Emscriptenつかうのだから、それ用のコマンドを!
あれ足りないこれ足りない言われる エラー文言に従ってとにかく sudo apt update && sudo apt install [パッケージ名]
できたので使ってみる 生成されたmozjpeg_enc.js ⇒約3000行のコード(;´∀`)コレモウワカンネエナ このjsどうやって使うんや… いったんexportとかないかな ⇒最後の行にexport default Moduleあった ⇒多分importして使えばいいけど、何のメソッドが使えるんや…
これなに?
mozjpeg_enc.cpp⇒バインドファイル Makefileに指定ある バインドファイルを自由に書き換えて何を生成するか決められるんだ jsから何が呼び出せるものかはここ見ればわかるんだ! mozjpeg_enc.cpp Makefile
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とかいってるけどめっちゃ大事なことしてくれてる... そこにしびれるあこがれる...☆
使ってみる 生成したmozjpeg_enc.jsとmozjpeg_enc.wasmを 使用したいプロジェクトに連れていく import MozjpegEnc from [ファイルの場所] const mozjpegEnc =
await MozjpegEnc(); const result = mozjpegEnc.encode([画像],[画像の横幅],[画像の 縦幅],[オプション]) ※詳しくはmozjpeg_enc.cpp参照
CanvasAPIで画像圧縮したのと 見た目品質あんま変わらんのやが…(^_^;) • CanvasAPIが使用するのはブラウザ内蔵のjpegエンコーダ/デ コーダ(具体的な実装不明) ⇒こやつ…そこそこ優秀なのでは • オプションをもう少しちゃんといじればよくなる? • そしてCanvasAPIのほうでOKとなったので、
難しいmozjpegとはバイバイしました。
いろいろ新体験 • Emscriptenをつかってみること • chatGPTヘルプもらいつつオープンソースのコードを見てみること • オープンソースから拝借してくること(していいんだ!) • C++に触れる •
個人がGitHubにコードを公開する意味を知る(今度やってみよう)