• CREATIVE

August 07.2019

【画像軽量化対策】WebPを利用して画像を高速表示!SEO対策・離脱防止に重要な表示速度改善方法

画像の軽量化

こんにちは、フロントエンドエンジニアのはるかです。今回はWebサイトの表示速度の改善において注目される次世代画像フォーマット「WebP(ウェッピー)」について、その特徴や導入方法についてお話します。

Webサイトの制作に携わる上で、「Webサイトの高速表示」は常日頃から意識して取り組まなければならない命題です。

ページの表示に時間がかかってしまうと、ユーザーの離脱が増えるのはもちろん、SEOの観点でも、ページ表示速度はGoogle社の検索順位の評価項目のひとつに加えられているので、順位を落としてしまう可能性があります。

特に、画像の読み込みは、表示速度低下の原因となりやすい問題のひとつです。

最近では画面の高解像度化により、画像を鮮明に表示するために、画面で表示する大きさ以上のサイズで画像が書き出されるようになり、それに伴って容量も増える傾向にあります。

そのような、Webでの画像処理の課題を解決するべく開発された、次世代の画像フォーマットが「WebP(ウェッピー)」です。

WebPを利用することにより、jpgやpngといった従来の画像フォーマットよりもさらに容量を軽量化することができるので、ページ表示速度の向上が見込まれます。

WebPとは

WebPは、Webでの利用に重点を置いて、Google社が開発した次世代画像フォーマットです。

WebPは可逆圧縮(ロスレス圧縮)、非可逆圧縮、透過処理、アニメーションにすべて対応しているので、PNG、JPEG、アニメーションGIFなど、用途で使い分けていた従来の各画像フォーマットを、これ1つで代替させることができます。

そして画像サイズは、PNGよりも約26%、JPEGよりも25~34%軽量での圧縮が可能となっており、ブラウザでのデコードも従来フォーマットよりも高速です。

よって、既存の画像をWebP形式に置き換えることで、Webページの表示速度の短縮化を図ることができます。

Google社自身も現在はこのWebPを利用することを推奨しており、過去の記事『Webページの表示速度&スマホ対応度を手軽にチェック!Google公式ツール2つを紹介』にて取り上げた、「Search Console」においても、画像のフォーマットをWebPに変更することで、表示速度の評価スコアが向上します。

WebPでの圧縮例

それでは、WebPを利用することで容量をどの程度軽量化できるのか、画質はどの程度の差があるのか、実際に検証したいと思います。

圧縮前の画像1
例1(元画像):779KB

まずはこちらのJPEG写真で検証します。元画像の容量は 779KBです。これを、JPEGのまま画質を80%に落とした場合と、WebPに非可逆圧縮(画質80%)で変換した場合で、変換後の容量と画質を比較します。

例1(JPG):353KB

まず、JPEGのまま画質を80%に落とした場合では、容量は353KBとなり、おそよ55%の削減となりました。

例1(WebP):122KB

一方、WebPに非可逆圧縮(画質80%)で変換した場合、容量は122KBとなり、約84%の削減となりました! 画質についても、元画像からの劣化を感じさせない質感となっています。

圧縮前の画像1
例2(元画像):553KB

続いて、こちらの透過png画像を利用して検証します。

元画像の容量は553KBです。こちらを、PNG画像の圧縮で有名なWebツール「TinyPNG」で圧縮した場合と、WebPで非可逆圧縮(画質80%)で変換した場合を比較します。

例2(圧縮済みPNG):131KB

まずはTinyPNGで圧縮した場合、変換後の容量は131KBとなり、約76%の削減となりました。

例2(WebP):131KB

続いて、WebPへの変換を行った場合では、容量は64KBとなり、約88%の削減となりました。

TinyPNGでも容量を大きく圧縮することができていますが、WebPでは更にそれ以上の効率での圧縮が可能となっています。

また、同画像を可逆圧縮(ロスレス圧縮)で変換した場合、容量は363KBとなり、約34%を削減することができました。

例2(WebP・ロスレス):363KB

画質を落としたくない場合でも、WebPを利用することで、容量だけ落とすことができています。

これらの例でもわかるように、WebPは従来の画像フォーマットよりも容量の圧縮性能において優れていることがわかります。

WebPのブラウザ対応

このように、Webでの利用において優れたパフォーマンスを発揮するWebPですが、2010年に登場してからほぼ9年経った現在でも、まだまだ普及は進んでいない状態です。

その要因の1つが、対応ブラウザが限られているという点です。

HTMLやCSSのWebブラウザ対応状況を確認できるWebサイト「Can I Use」によれば、2019年7月現在、WebPに対応しているブラウザは全体の約80%となっています。

Google Chromeはもちろん、Mozzilla Firefox、Microsoft Edgeでは対応済みですが、Safari、Internet Explorerでは非対応です。

これらの主要ブラウザすべてが対応しない限りは、画像をすべてWebPに置き換えるのは時期尚早と言わざるを得ません。

ブラウザのWebPへの対応が十分でない間は、非対応ブラウザでも画像が表示できるように配慮した形で実装する必要があります。

WebPの実装方法

WebPを実装する方法の1つは、HTML5.1で新たに登場したタグを利用すること。

WebPを利用可能なブラウザではWebPで読み込み、そうでなければ「従来の画像フォーマットで読み込む」方法です。

このような形式で画像を読み込むことで、WebP対応/非対応ブラウザの両方に対応することができます。

pictureタグ自身もInternet Explorerには対応していませんが、pictureタグ非対応ブラウザではimgタグの内容がそのまま表示されるので、WebPに置き換えるという用途のみであれば、この方法で狙い通りの動きを実装することができます。

また、背景画像(background-image)としてWebPを利用したい場合は、Modernizr.jsを利用して、対応/非対応ブラウザで参照する画像をCSS上で書き分けることで対応が可能です。

WebPの作成方法

WebPはグラフィックソフトで公式にサポートされていないことが多いため、従来の画像フォーマットからの変換によって作成することが主流となっています。

ここでは、おすすめのWebP変換・生成ツールを4点紹介します。

【Webツール「squoosh」】

WebP形式の画像を作成する最もお手軽な方法は、Webツールを使った画像変換です。おすすめのツールは、Google社の開発者がリリースした「squoosh」です。

squoosh

こちらのツールでは、画像はアップロードされず、オフラインで変換が行われるので、画像をWebにアップロードしたくないケースでも利用可能です。

変換前後の画質の変化をプレビューで比較しやすくなっているほか、変換前後の容量の違いも確認できるので、WebPのメリットを実感しやすいUIとなっています。

また、可逆/非可逆圧縮の選択や、画質の調整など、細かい変換設定が可能となっています。

ただしこのツールでは、変換は1枚ずつでしか行うことができません。まとめてWebP変換処理を行いたい方には、次の方法をおすすめします。

【バッチ処理による変換】

こちらで提供されている「バッチファイル」を使用して、フォルダ内の画像をまとめてWebPに変換します。

コマンドプロンプト(いわゆる黒い画面)を扱うのが苦手な方でも扱えるよう、バッチファイルに画像フォルダをドラッグ・アンド・ドロップするだけで変換処理を行ってくれる点もありがたいポイントです。

【Photoshopプラグイン「WebPShop」】

Adobe Photoshopを利用している方はプラグインを利用することで、WebPファイルをPhotoshopで開いたり、WebP形式で保存したりすることができるようになります。

こちらもGoogleから公式でプラグインが提供されています。

Photoshopプラグイン「WebPShop」

WebP形式での保存は、書き出しではなく「保存/別名で保存」から行います。

保存時にオプションが表示され、画質などを調整することができます。画質を100(最大)に設定した場合は、Lossless圧縮となるようです。

【WordPressプラグイン「EWWW Image Optimizer」】

WordPressを利用している場合は、プラグインによる自動変換での対応が可能です。

画像の圧縮プラグインとして有名な「EWWW Image Optimizer」にはWebP変換機能が搭載されており、これを有効化することで、アップロードされたJPEG、PNG画像は自動的にWebPに変換されるようになります。

※自動変換機能を利用するには、.htaccessファイルの修正が必要です。

以上、おすすめのWebP変換・作成方法4点でした。

WebP で離脱防止・SEO対策を!

WebPはWebの利用シーンにおいて非常に有用な画像フォーマットです。画像の画質を維持しながら容量を削減し、ページ表示速度を短縮することで、ユーザー離脱を防ぎ、SEO面の評価も得られます。

現時点ではブラウザ対応や変換・作成の手間が課題となっていますが、それでも積極的に導入する価値のあるものだと思います。

画像を多く表示するWebサイトやLP、あるいはサイズの大きい画像を読み込むページでは、より大きな効果を上げることが期待されますので、そのようなページの表示速度にお悩みの方は、この機会にWebPの導入をご検討されてはいかがでしょうか。