[PR] Googleが開発した新しい画像フォーマット WebP (ウェッピー)、WebP導入シュミレータで今すぐチェック!

WebP画像を目立たせるChrome拡張機能 WebP Highlighter

画像が意図したとおりWebPフォーマットで配信されているかを確認するとき、もちろん見分けがつかないのでDeveloper Toolsで確認してきました。

もっと楽な方法ないかなーと調べたところ、ちょうどいいChrome拡張機能がありました。

WebP Highlighter

いま見ているページでWebPとして配信されている画像を蛍光色の枠でハイライトします。

たとえばグローバルで積極的にWebP配信を行っているGAPではこのような表示になります。

gap.png

この豪快なハイライト表示。デザイナーではなく開発者自身が決めたのだろうなーと想像しました。目には痛いですが、プログラマーとして親近感が湧きました。

アドレスバーにはメニューボタンが表示されます。全体でON/OFFしたり、サイトごとにON/OFFできます。

highlighter.png

ハイライトの色で圧縮方式を表現しているようです。

  • 緑 = シンプルなロッシー(非可逆)圧縮。Jpegからの変換が多い。
  • 紫 = シンプルなロスレス(可逆)圧縮。PNGからの変換が多い。
  • 赤 = 拡張(透過やアニメーション、カラープロファイル)を含む。

purple-and-green.png

デバッグにも便利ですが、WebPを採用しているサイトが一目でわかるので面白いです。

前へ前へ

iPhoneの非対応でシェア劣勢でも、いまWebPに対応する意味

次へ次へ

WebPと従来の画像を正しく振り分ける.htaccessファイル