Home
CSS
次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

公開日
2021.04.04
更新日
2022.04.02
次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

どうも!かけちまるです!
Webサイトに画像をたくさん使う時、表示速度が遅くなってしまします。
画像を使うことでユーザーには分かりやすいサイトになるかもしれませんが、いつまでたっても画像が表示されなけれなユーザーにとってはストレスです。
さらに表示速度の低下はSEOの観点からも改善すべき点なのです。

そこで今回はJPG、PNG、GIFにかわる次世代画像フォーマットの「WebP(ウェッピー)」をご紹介します。
WebP(ウェッピー)は、JPG、PNG、GIFとほぼ同等の画質を保ちながらもファイルサイズが軽いのが特徴でサイトの表示速度向上が期待できます。

ブラウザの対応状況や対応していないブラウザでの対処法も解説しているのでぜひサイトの表示速度向上に役立ててください。

WebPとは?

WebP(ウェッピー)はGoogleが開発したJPG、PNG、GIFにかわる画像フォーマットです。
2010年9月30日からリリースされているみたいですが、話題になっているのは最近なのではないでしょうか。
JPGと同じく非可逆圧縮でありながらPNG、GIFのように透過(アルファチャンネル)も扱えます。

最大の特徴は、ファイルサイズが小さいところでサイトの表示速度向上が期待されます。
主要ブラウザはほぼ全てサポートしているので近年使いやすい画像フォーマットになってきました。

ブラウザのサポート状況

WebPを使用するメリット・デメリット

少し前までは、対応ブラウザの少なかったデメリットはありましたが、最近ではほぼ全ての主要ブラウザをサポートしているので使用しやすい画像フォーマットとなりました。

メリット

・サイトの表示速度を高速化できる
WebPはほぼ同等の画質を保ちながらPNGよりも約26%、JPGよりも約25%〜35%のファイルサイズを軽量化できます。
よってサイトの表示速度が向上し、SEOの観点でサイトの評価向上にもつながります。

デメリット

・画像をWebPへ変換するのが面倒
PhotoshopやIllustratorなどのソフトから直接書き出しができないため一回JPG、PNG、GIFで書き出してからWebPへ変換するツールを使ってWebPを作成しないと いけないようです。
※Photoshopは「WebPShop」というプラグインを使うとWebPの書き出しができるようです。

WebPShop:https://developers.google.com/speed/webp/docs/webpshop

WebPの作成方法

ここでは、WebPを作成する方法をご紹介します。
オススメするのは「サルワカ」というブログサイトが提供しているWebP変換ツールです。

WebP変換ツール:https://saruwakakun.com/tools/png-jpeg-to-webp/

サルワカさんが提供しているWebP変換ツールは、

  • ・複数枚の画像を一括で変換できる
  • ・どのくらいファイルサイズが軽量化されているか見える化されている

という点で使いやすいため重宝しています。

WebP変換ツール

サポートしていない時の対処法

2021年4月4日時点ではほぼ全てのブラウザで対応しているWebPですが、IEなどSafariも一部のバージョンではサポートされないようです。

これではまだまだWebPは使えないように思いますが、HTMLのpicturesourceを使うことによってWebPに対応しているブラウザにはWebPをそうでないブラウザにはJPG、PNGなどの他のフォーマットの画像をというように出し分けすることができます。

仕組みとしてはpicture内をブラウザが上からチェックしていき表示できる画像があればその画像を表示します。
つまり下のコードでは、webpに対応しているブラウザではwebp画像を表示し、webpに対応していないブラウザではjpg画像を表示します。

下記のコードのsrcset属性とsrc属性の画像パスを任意の値に変更して使ってください。

HTML
コピー
<picture> <source srcset="./images/kakechimaru.webp" type="image/webp"> <img src="./images/kakechimaru.jpg" alt=""> </picture>

下記コードはおまけでwebpの出し分けにプラスしてPC用とスマホ用の画像の出し分けをしています。
sourceにメディアクエリを設定することでPC用とスマホ用の画像の出し分けが実現できます。

HTML
コピー
<picture> <source srcset="./images/kakechimaru_sp.webp" media="(max-width:500px)" type="image/webp"> <source srcset="./images/kakechimaru_sp.jpg" media="(max-width:500px)"> <source srcset="./images/kakechimaru.webp" type="image/webp"> <img src="./images/kakechimaru.jpg" alt=""> </picture>

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【メンテナンス画面】LightStartの設定方法とデザインカスタマイズ

【メンテナンス画面】LightStartの設定方法とデザインカスタマイズ

Ajaxを使用したheaderとfooterの共通化【JavaScript】

Ajaxを使用したheaderとfooterの共通化【JavaScript】

GLSLの修飾子varyingの使い方【Three.js】

GLSLの修飾子varyingの使い方【Three.js】

【WordPress】画像アップ時に自動生成されないようにする方法

【WordPress】画像アップ時に自動生成されないようにする方法

【’関数名’ is not defined】TypeScriptでHTMLイベント属性を使う時の対処法

【’関数名’ is not defined】TypeScriptでHTMLイベント属性を使う時の対処法

Underscore.jsについて学ぶ

Underscore.jsについて学ぶ