画像をWebPに変換してWEBサイトの表示測度を改善しましょう

WebP (ウェッピー)は、トラフィック量軽減と表示速度短縮を目的としてGoogleが開発した次世代画像フォーマット（2010年に仕様公表・提供開始）のことで拡張子は「webp」。
JPEG以上の圧縮率に加え、PNGと同様に透過も可能。GIFのようなアニメーションにも対応しています。

IEのサポートが2022年6月に終了し、WebPはほぼすべての環境で対応可能になったのでWebPを使用するメリットなどをご紹介していきたいと思いますが、まだ非対応ブラウザもありその際の対処方法も合わせてご紹介します。

WebP移行のメリット

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。
Wikipediaより

WebP変換ツール

JPEGやPNGなどからWebPに変換するには、以下のWebサービスがオススメです。

Squoosh

squoosh.app

12 Posts

312 Users

4391 Pockets

Squoosh

https://squoosh.app

Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.

SYNCER

36 Users

63 Pockets

WEBP変換ツール (jpg、pngとwebpを相互変換)

https://lab.syncer.jp/Tool/Webp-Converter/

WEBPコンバーターは、お手持ちのJPEGやPNG画像をWEBPに変換するウェブサービスです。現在、Chromeのみサポートしています。

WebP非対応ブラウザへの対処

2022年現在、世界で90％以上のブラウザで対応しているWebP。気にしないで使用しても問題はありませんが、以下のようにして非対応ブラウザで閲覧時には代替画像を切り替えることが可能です。

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="">
</picture>

<picture>タグはIEでサポートされていませんが、下記CDNを読み込ませることで対応可能。

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>

また、.htaccessファイルを配置すると、同じフォルダにある場合、指定した画像フォーマットはWebPに置き換えられます。

参考ページ
https://github.com/vincentorback/WebP-images-with-htaccess

関連投稿:

サイト公開しました CSSのみでテキストや画像にぼかし効果を付ける オリジナルサイト作成お得プラン 【初心者の方向け】 Bootstrap4の使い方 導入について