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

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

MovableType/WordPressを使ったホームページ制作、機能追加や設置代行などの改修、システム開発、サイトの保守を手掛けております。


アナタが実現させたい機能、やりたい事をお聞かせいただけませんか? そのイメージを一緒に実現しましょう!
お問い合わせは以下のページから!!

やまライダーのサイトへ

書いた人:やまライダー(嫁)

Web屋さんで8時間フルタイム勤務をしている、いわゆるワーキングマザー。
夫婦共働きで、ムスメ氏を育てています。
主に資産運用にかかわるお金の話、ムスメ氏を育てていく上での子育ての話、そしてたまにお仕事関連の記事を書いていく予定。
プロフィールを見る