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

Google開発の新画像形式WebP

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

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

Webp形式に変換する

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形式を、といった振り分けが可能になります。