2020年07月16日

画像サイズを小さくできる！次世代画像フォーマット「WebP（ウェッピー）」

SEOコンサルタントの長濱佳子です。

「WebP（ウェッピー）」をご存じでしょうか？

WebPとはGoogleが開発している画像フォーマットです。

画像サイズを小さくできるという特徴があり、SEO対策としてもページスピードの改善のために、取り入れたいフォーマットといえます。

今回は次世代フォーマットと呼ばれている「WebP（ウェッピー）」について、ご紹介します。

■WebP（ウェッピー）とは？

WebPとは、米Googleが開発している画像フォーマットです。特徴は画像サイズを小さくできることで、「JPEGやPNGに比べると、25～35％サイズが小さくなる」といわれています。

現在（2020年7月時点）、Chrome、Edge、Firefoxなど約78％のブラウザがWebPに対応していますが、Safariはまだ対応していません。

Google Speed Insightの「改善できる項目」には、『「JPEG 2000」「JPEG XR」「WebP」などの次世代フォーマットを使えばPNGやJPEGより圧縮率が高くファイルサイズを抑えられるので、読み込み速度も上がる』と記述されています。

■WebPのメリット

WebPを使うメリットは、先ほども紹介しましたが、画像サイズを小さくできること。

サイズが小さくなるとページの表示速度が上がり、SEO対策にもなるのです。つまり、WebPは表示速度短縮を目的とした画像フォーマットといえます。

ページスピードの改善には、「JavaScript」とならび「画像サイズの軽量化」が重要ですので、WebPは取り入れたいフォーマットです。

もう1点、画像のファイル形式が統一されるという点もメリットといえるでしょう。

■WebPのデメリット

WebPのデメリットは、まだ対応していないブラウザがあること。

対応していないもの1つにSafariがあります。特に、iPhoneのシェアが多い日本では、Safariを利用している人が多いので、代替画像フォーマットの設定をするという対応が必要になります。

■SafariもWebPをサポートする

2020年7月現在、Apple製ブラウザのSafariでは「WebP」がサポートされていません。しかし、PC版およびiOS版のSafari14のバージョンからサポート予定だと発表がありました。

iPhoneのシェアが多い日本では歓迎すべきアップデートといえるでしょう。

■WebPを使う際のHTMLの注意点と記述方法

主要なブラウザはWebP形式の画像に対応していますが、100％のブラウザがWebPをサポートしているわけではありません。

このため非対応ブラウザには、以下のように別の画像を出すといった記述をする必要があります。

example.png.webpは、1枚の画像について2つの画像フォーマットを指定しており、example.png.webpの画像が表示できない場合は、example.pngを表示してという指定になります。

■WebP変換に便利！画像圧縮サービス「Squoosh」

Googleは画像圧縮サービス「Squoosh」を公開。画像をアップロードすると、元データと比較しながら画像の圧縮やリサイズなどが行えます。

変換では「WebP」や「JPEG」「MozJPEG」「PNG」などに変換することが可能。

＜使い方＞
1．Squooshに画像をドラッグする
2．変換するフォーマット（WebP）を選択する
3．画面右下の保存アイコンを押す

■まとめ

WebPは画像サイズを小さくできるフォーマットです。

2020年7月現在対応していないブラウザもありますが、今後対応していくと考えられます。

フォーマットはツールを使うことで簡単にできます。SEO対策としてもページスピードの改善は重要です。

画像サイズの軽量化はページスピードの改善で簡単に着手しやすい部分です。

次世代画像フォーマット「WebP」を取り入れてみてください。

この記事は2020年7月16日現在の情報を元にしています。

外部サイトへのリンクが切れている場合があります。ご了承ください。

株式会社グリーゼのサービス紹介資料

株式会社グリーゼのサービス紹介資料です。企業のWebマーケティング全般を支援するグリーゼの、サービス概要、選ばれる理由、実績、設計資料などを掲載しています。「グリーゼってどんな会社」と思ったからは、ぜひ資料をダウンロードしてください。

ダウンロードランキング