Coding Methodology

次世代画像フォーマットWebPを使ってみよう!

2022 / 04 / 28

皆さん、WebPの画像を使用されていますか?
今後IE11のサポートの終了に伴って、本格的にWebPを使える場面が増えてくるかと思います。今回はそんなWebPの概要と具体的な使い方をご紹介します。
「高画質な画像が使いたい(でもWebサイトが重たくなるのは嫌だ)」「ページの表示速度の改善対応でPage Speed Insightがよく提案するWebPが気になっている」という方に、特に参考となれば幸いです。

次世代画像フォーマットWebPを使ってみよう!

WebPとは?

WebP(ウェッピー)とは、Googleが開発したwebサイト向けの次世代画像フォーマットのことです。参考サイト:An image format for the Web

WebPには、下記の特徴があります。

  • PNGのような透過処理やgifのようなアニメーションも可能です。
  • 可逆圧縮・非可逆圧縮のどちらの圧縮形式も選べます。

可逆圧縮とは:圧縮前のデータに戻すことができるが、その分圧縮率はやや下がる。

非可逆圧縮とは:一部のデータの欠落や改変をすることで、かなり高い圧縮率になりますが、劣化する可能性があります。

つまり、透過の有無などによって画像の拡張子を使い分ける必要もなく、画像に合わせて圧縮方法を選べたりとメリットがたくさんあります。

注意事項
使用される際は、WebサーバーがWebPに対応しているかを事前に確認しましょう。

WebPを使ってみよう!

【1】画像フォーマットの変換

まずは画像をWebP形式にする必要があります。
色々なツールが出ていますが、Googleが公開しているアプリがあります。

squoosh(スクーシュ)

使い方は、サイトにアクセスして、ブラウザに画像をドラッグ&ドロップするだけです。
JPGやPNG画像を簡単にWebP形式に変換することができます。
それ以外にも、リサイズや圧縮の度合いを調整することも可能です。

その他、gulp(タスクランナー)での変換も可能です。一括でできるので、大量の画像を変換したい場合は、こちらもおすすめです。

変換時の注意
画像を変換すると、元の拡張子に関係なくすべて「画像ファイル名+.wepp」になります。
変換後でも変換前のファイル形式がわかるように、WebP画像を使用する際は、ファイルの運用管理のため、元の拡張子も含めたファイル名にすることをおすすめします。

例:

変換前のWebP非対応ブラウザ用画像:sample.jpg
変換後のWebP画像:sample.jpg.webp

【2】制作時の設定方法

今回は、静的なWebサイトを想定して、2つの設定方法をご紹介します。

①<img>、<picture>で設定

JPGやPNG等の画像と同じく、<img>を使うことで表示させることができます。

HTML 設定例:

<img src="/画像名.webp">

ただし、WebPはIE11非対応の画像フォーマットです。今後サポートが終了するブラウザではあるものの、引き続きIE11でも表示したいケースがあると思います。
参考サイト:Can I use(WebP)

そんなときは、<picture>タグを使ってJPGやPNG画像と併用します。

HTML 設定例:

<picture>
  <source type="image/webp" srcset="/images/sample.webp"></source>
  <img src="/images/sample.png" alt="設定例">
</picture>

<picture>は、ブラウザやデバイスの解像度ごとに画像を出し分けすることができるタグです。
たとえば、下記のように記述すると、WebP・PNGのそれぞれで高解像度ディスプレイ向けの設定をすることが可能です。
ブラウザは上から順に読み込み、条件に合う画像を表示します。いずれの条件にも当てはまらない場合は、最後の<img>に設定された画像を表示します。

また、Altテキストは<img>にのみを指定するだけで、WebP画像を表示したブラウザでも同じAltテキストが適用されます。

HTML 設定例:

<picture>
  <source type="image/webp"
    media="(min-width: 1025px)"
    srcset="sample-pc.webp 1x, sample-pc@2x.webp 2x">
  <source type="image/webp"
    media="(max-width: 375px)"
    srcset="sample-sp.webp 1x, sample-sp@2x.webp 2x">
  <source type="image/webp"
    media="(max-width: 1024px)"
    srcset="sample-md.webp 1x, sample-md@2x.webp 2x">
  <source
    media="(min-width: 1025px)"
    srcset="sample-pc.png 1x, sample-pc@2x.png 2x">
  <source
    media="(max-width: 375px)"
    srcset="sample-sp.png 1x, sample-sp@2x.png 2x">
  <source
    media="(max-width: 1024px)"
    srcset="sample-md.png 1x, sample-md@2x.png 2x">
  <img src="sample.jpg" alt="設定例">
</picture>

細かく出し分けをしたい場合、それぞれの画像について表示条件をHTMLに記述する必要があります。記述量が増えるため、制作側の工数は増加する可能性があります。
その場合は、出し分けたい画像を減らしたり、対応デバイス・ブラウザを限定する等で調整するとよいかもしれません。

②.htaccessで出し分けを制御

.htaccessに記述することで、WEB サーバー上で「WebP画像が用意されていて、アクセスしたユーザーのブラウザがWebPに対応するブラウザであれば、WebP画像を表示する」という制御をおこなうことができます。

.htaccess 設定例:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

記述方法を間違えるとWebサイト全体がエラーで表示されなくなってしまうため、設定の際には十分に注意する必要があります。
しかし、WebP画像と非対応ブラウザ向けの画像をアップしておけば、HTML上に1つ1つ記述せずに表示させることができるので便利です。

【3】設定後の確認方法

設定後は、Googleディベロッパーツールで確認できます。
WebPが表示されている場合、Googleディベロッパーツール内の「Network」で下記のように表示されます。

WebPは気を付けるべきことがありますが、利用するメリットもあります。
今後活用する場面がより一層増えてくるのではないかと思います。

一覧に戻る

CODING FACTORYのWebサイトにご訪問いただき、ありがとうございます!サイトの改善や情報発信に活かすために、個人情報保護方針に基づいたCookieの取得と利用のご同意をお願いいたします!
個人情報保護方針の詳細