デッキエディタ開発記録 vol.37 – ウェッピーアップデート
みなさん、ウェッピーですよウェッピー。
なんじゃそら？って話ですね。
なにそれ食えんの？
WebPとは、Googleが10年ぐらい前（※2010年9月頃）に開発した画像フォーマットです。
このフォーマットはメジャーな画像形式の特徴（※pngのアルファチャンネルやgifアニメーションまで全ていける）を全て兼ね備えているにも関わらず、何故かファイルサイズが40～60％減少すると言う夢のようなフォーマット。
当然Googleは「次世代のブラウザ画像フォーマットはWebPで決まり！」と仕様を公開し、変換ツールなどの提供を始めました。
しかしブラウザを開発しているのはGoogleだけではありません。
特に競合相手のMicrosoftとAppleは「うぇｗっｗｗぴｗｗとかｗｗｗｗ」と、まぁ素直に受け入れるハズも無く。
それから8年後の2018年、やっとの事でMicrosoftが折れてEdgeでWebPを受け入れました。
そして更に2年後、遂にAppleも折れてiOS 14及びmacOS Big SurのSafariでサポートされて、メジャーブラウザ全てがWebPに対応した形となったのです。
いやこれね、ほんとつい最近の話なんですよｗ
当サイトのWEBアプリはカード画像を読み込みまくるから、WebPに切り替えるメリットは凄く大きくて、
- ユーザーのブラウザのキャッシュ容量が概算で３割以上減る見込み。
- ユーザーの画像ダウンロード時間がほぼ半減する。
- サーバのトラフィックがほぼ半減する。
良い事しかねえです！
InternetExplorerとか言う謎のブラウザは対応していないらしいけど、それこそ「なにそれ食えんの？」ってヤツなので割愛。
どうすればウェッピーになんのさ
すでに全画像をWebP版も用意しておりますので、当サイトのドメイン「theuri.net」の
キャッシュを吹っ飛ばすッ！
だけで完了です。
ブラウザにはキャッシュと言う機能があって、現在皆さんが読み込んだことのあるカード画像はjpgとしてブラウザに保存されています。
このキャッシュが残っているうちは、サーバにリクエストをかける事無くそいつを使う事で通信量を減らし、素早く表示すると言う仕組みなんですが、当然キャッシュしている分だけ本体容量を喰ってしまいます。
この「キャッシュクリア」については、皆さんが使っているデバイスやブラウザによって操作が異なるし、それぞれの名称も違うため、申し訳ないのですがググって頂ければと思います。
なお、私のSafariは770MBもキャッシュしてましたｗ
開発のテストで一通り画像を表示するからね、ヤバいことなってた！
皆さんもこれを機に「次世代画像フォーマット」をフル活用し、快適なエディットや一人回しシミュを楽しんでみては如何でしょうか。
おまけ
人気カードのWebP変換による容量削減の実数値。
- Black Lotus (30.9KB → 16.3KB)
- アンシー (27.2KB → 12.2KB)
- ３テフェ (90.4KB → 21.7KB)
- 草タイタン (55.1KB → 25.6KB)
- ウーロ (65.3KB → 24.9KB)
大体４～６割減ですね、期待値は５割ぐらいなのかなと。