はじめに

こんにちは。細々とプログラミングをしているsotanengelです。

前回、RustをWASM形式に変換してWebアプリ作った(【Rust✖︎WASM】定義書から自動でRustの構造体ファイルを作成するWASM公開！)んですが、
テキスト形式のファイルを変換するだけだとRustの「高速処理の恩恵」を得られてないと思ったので、今回は画像をWebP形式に変換するWASMアプリを実装しました！！

Webアプリや具体のコードに触れてみたい方は以下のサイトをご覧くださいませ。

以下、背景だったり苦労した点を紹介していきます👀

背景

そもそもWebP形式ってなに？

Googleさんが開発した新しい画像フォーマットです。
画像サイズをいい感じに圧縮することができるのが特徴です。
↓公式サイトより

WebP 可逆圧縮画像は、PNG 画像と比べてサイズが 26% 小さくなります。
WebP の非可逆画像は、同等の SSIM 品質インデックスで同等の JPEG 画像よりも 25 ～ 34% 小さくなります。
可逆 WebP は透明性をサポート（アルファ チャンネルとも呼ばれます）しますが、コストはわずか 22% の追加バイトです。
非可逆 RGB 圧縮が許容される場合、非可逆 WebP は透明度もサポートしており、通常は PNG よりもファイルサイズが 3 倍小さくなります。

↓さくらインターネットさんの分かりやすい解説

画像サイズとSEOの関係性

「画像サイズを圧縮すると何が嬉しいの」って話なんですが、SEO順位を改善することに繋がります。
Googleさんはページの読み込み速度をモバイル検索のランキング要因に利用することを明言しているため、ページ内のデータサイズを減らした方がいいんですよね〜
つまり「(サイトの中でもサイズを喰っている)画像を圧縮率の良いWebP形式にする」のはSEO対策として割に合っているというわけです。

苦労した点

1. ライブラリの選定

Issueを見てもらえればわかるんですが、選定でめっちゃ実装に時間かかりました。。。。
最初の時点で「webp」と「image-webp」があったんですが、webpの方がドキュメントしっかりしてたんで採用したんですよね。そしたら全然WASMへの変換でコンパイルが通らなくなってしまい・・・・
1週間くらい悩んだ結果、webpライブラリの大元であるlibwebp-sysクレートで「Cに依存するから無理やで」みたいなIssueを発見し、webpではなくimage-webpへの転換をしました。

2. ライブラリのドキュメント不備

webpクレートが使えなかったので、image-webp使うことにしたんですが、
READMEに記載の情報がこれしかなく絶望する(なお、exampleのコードもない)。

仕方なしに実装コード上のテストを確認し、GPTさんに土下座しながら実装完了しました。
↓私流のサンプルコードはこちら

※後続の人が困らないようにimage-webpにPR今度出します😇

さいごに

ライブラリが使えないという危機に直面しながら実装できて本当によかったです！
欲しい機能などあれば以下からリクエスト出してくださいまし👀