新画像形式「WebP」への変換と導入

  • facebook
  • このエントリーをはてなブックマークに追加
  • Twitter

  1. Google開発の新画像形式WebP
  2. Webp形式に変換する
  3. 画像をWebp形式に変換する際の注意点
  4. 対応ブラウザの問題
  5. 実際の表示にはpicture要素を使う

Google開発の新画像形式WebP

「WebP」とはGoogleが開発したWebサイト向けの高圧縮率の画像形式で、ファイルの拡張子は「.webp」です。Webサイトのトラフィック量軽減と表示速度短縮を目的、つまり画像軽量化を目的とした形式です。
PNG形式のように背景を透明にしたり、JPEG形式のように画像サイズを大きく圧縮することができます。

「WebP」は、天下のGoogleが採用している形式です。今後、主流の仲間入りをすると見てもいいのではないでしょうか?

Webp形式に変換する

squoosh
squoosh

ブラウザ上で画像ファイルを選択、またはドラッグアンドドロップします。
元の画像と比較しながら画像形式の変換、圧縮、サイズ変更を行うことができます。
WebPだけではなく、JPEG形式やPNG形式も選択できます。

画像をWebp形式に変換する際の注意点

注: 低品質または平均的な品質の JPEG を WebP に変換することは避けてください。 これはよくある間違いであり、JPEG 圧縮のアーティファクトが入る WebP 画像が生成されることになります。 その場合、画像と共に JPEG による歪みも保存しなければならないことになるため、品質が二重に損なわれてしまい、WebP の効率が低くなってしまいます。 変換アプリには、入手可能な最高品質のソース ファイル、できればオリジナルを使用してください。

画像の最適化を自動化する」より

対応ブラウザの問題

しかし、対応ブラウザの問題があります。2020年2月時点では、Chrome、Firefox、Edgeは対応していますが、Safari、iOSは未対応です。
このため、Webpを導入する場合は、対応しているブラウザではwebp形式の画像を表示し、対応していないブラウザではJPEG形式やPNG形式などの画像を表示するようにする必要があります。

実際の表示にはpicture要素を使う

picture要素は、画像を振り分ける要素です。複数のソースを用意して、その中からユーザーの閲覧環境に合った1つの画像だけを表示できます。

<picture>
	
	<source srcset="image.webp" type="image/webp">
	
	<img src="image.png">
</picture>

picture要素を使うことでWebpに対応しているブラウザにはwebp形式を、対応してないブラウザにはPNG形式を、といった振り分けが可能になります。

前の記事

WordPressで記事URLからIDを取得し、配列に入れてループを作成、任意の記事一覧を表示する方法

次の記事

LENDEXがお友達ご紹介キャンペーンを開始。Amazonギフト券プレゼント。