新画像形式「WebP」とは（JPEGやPNGを変換して画質を維持しつつ軽量化）
WebPはGoogleが開発した、画質を維持しつつファイル圧縮率を高める事ができる新世代の画像フォーマットです。
JPEGの非可逆圧縮とPNGの可逆圧縮を併用できるので、「精密な画像データでかつ背景透過の状態」でも効率的に圧縮できます。
WebPに変換すれば、WEBサイトの表示速度は格段に速くなるのでSEOに非常に有利になります。
次世代画像フォーマットWebP（ウェッピー）とは
WebPはそれまでのJPEGやPNG・GIF等の画像形式に対し、Googleが新しく作った画像フォーマットです。
画像には上記の様なフォーマット形式が存在し、それを拡張子で決定していますよね。
例えば「sample.png」であればpng形式であり、WebP画像の場合は「sample.webp」という拡張子が付きます。
ちなみに読み方は「ウェッピー」です。
WebPはJPEGに比べてファイルサイズが小さく、にもかかわらず画質が劣化しにくい特徴があります。
さらにPNGで活用されるアルファチャンネル透明度設定やアニメーションも可能であり、まさに次世代の形式と言えます。
Googleが強く推奨する画像形式
画像の容量の軽量化と品質維持というのはWEBにおける往年の課題です。
画像イメージはサイトPRの重要な構成要素ですが、高品質なデータを使えばそれだけ読込負荷が掛かるというジレンマが存在します。
高画質だとユーザーへの訴求につながるが読込が遅くなる
低画質だと読込負担は軽くなるが、ユーザーへの訴求につながりにくい
Oh2の圧縮技術を活用
Googleは「On2 Technologies」と呼ばれる会社を買収した後、2010年にこのWebP形式を開発しました。
On2は元々、数多くのビデオ圧縮技術に取り組んでいた企業です。
この企業を買収する事で、Googleの新しいオーディオビジュアル形式であるWebMや、WebP等の画像形式を生み出す事に成功しています。
サイズ削減の向上を推奨
GoogleはこのWebPと呼ばれる次世代の画像フォーマットを通して、この画像品質と表示速度の往年に渡る問題を解決しようとしてます。
GoogleがWebP・JPEG2000・JPEG XRなどの新フォーマットを使用し、品質を維持しながら画像のサイズを大幅に削減する事を推奨している事が下の図でわかります。
PageSpeed Insightsのスクリーンショット
報告によれば新フォーマットの活用で、読込速度に0.75秒の差が出ているとしています。
一見それ程の削減時間ではない様に思われますが、実は違います。大きな違いと可能性があるのです。
この1秒足らずの読込速度の差で、特にモバイル環境におけるコンバージョン率に違いが生まれるのですね。
検索データでもWebPをサポート
Googleの画像検索でサポートされている画像フォーマットには当然WebP画像も含まれています。
そしてリッチスニペット等の構造化データでもWebPやSVG等の利用が可能になっています。
実際にAMP記事や組織ロゴで設定する画像に関して、しばらく前からSVGやWebPがサポートされる様になっていますね。
WebPの特徴
WebP画像形式の特徴は何と言ってもやはり、「非可逆圧縮」と「可逆圧縮」を併用する事ができる点でしょう。
WebPの不可逆圧縮
非可逆圧縮は、JPGおよびGIFのファイルサイズを大幅に削減するために使用される圧縮形式です。
ただしこの形式の場合ファイルサイズを削減するためには、ファイルの一部データ（ピクセル）自体を削除する必要があります。
つまり非可逆圧縮を使うと、画像の品質はある程度低下してしまう訳ですね。
WebPはこの不可逆圧縮をより効率的に使用する事で、劣化度合を軽減できる様になっています。
WebPの可逆圧縮
PNGなどで使われる可逆圧縮は逆に、非可逆圧縮のように画質を低下させません。
代わりにファイルのバックエンドから余分なメタデータを削除する事でファイルサイズを小さくしています。
確かにこの方法であればサイズを縮小しても画像の品質は損なわれません。
しかし可逆圧縮はそれまで、いわゆる非可逆圧縮を使うファイルサイズ形式に利用する事はできませんでした。
しかし今回の新しいWebP可逆圧縮の技術により、非可逆圧縮を使うファイルサイズ形式へも対応できる様になっています。
WebP形式のメリット
JPEG形式よりもさらに高い圧縮が可能
JPEGの不可逆圧縮は、画像の鮮明さと細かさの低下に直結しています。
圧縮率を上げてしまうと、JPEGは荒れやすいですよね。
一方WebPの非可逆圧縮は予測コーディングと呼ばれるものを使用して、画像ピクセルをより正確に調整します。
それによりJPEG時の非可逆圧縮よりもより高い精度で圧縮が可能になっています。
逆に、ファイルサイズを大幅に圧縮した画像でもある程度画質を維持できる訳です。
※GoogleはWebPの非可逆圧縮の結果、同じ品質のJPEGより平均して約25～34％小さくできるとしています。
WordpressプラグインによるWebP画像のファイルサイズ比較
以下はWordPressで5つの大きなJPG画像を使用して変換テストしたものです。
実際にWebPでどの程度圧縮が実施され、jpgファイルとの間にどれくらいのサイズの違いがあるかを示しています。
従来のJPEG画像サイズ480KBに対して、WebP画像は43KBを実現していますね。
これだけでもJPEGの代わりにWebPを導入するメリットは大きいと言えますね。
参照：「KeyCDN」（画像のCDNサービスサイト）
Google WebPギャラリー
PNGの圧縮率よりもさらに高い圧縮が可能
PNGの可逆圧縮は画像の品質を維持するためのものですが、写真等の大きな画像サイズには不向きです。
しかしWebPなら、大きな画像サイズのタイプの可逆圧縮をより効率的かつ効果的に処理します。
これは使用される様々な圧縮技術や、画像に適用されるエントロピーエンコーディングによる賜物です。
※GoogleはWebPの可逆圧縮の結果、同じ品質のPNGより平均して約26％小さくできるとしています。
Google WebPギャラリー
可逆圧縮と非可逆圧縮を併用
WebPにはGIFなど他のファイル形式ではできない事が可能です。
RGBカラーにWebPの非可逆エンコーディングを使用しつつ、背景が透明な画像（アルファチャネル）部分に可逆エンコーディングを併用する事ができるのです。
つまり「写真等の精密なデータで、かつ背景が透過された状態」を効率的に圧縮できる訳です。
※Googleは、非可逆圧縮を使用した場合の平均削減量はGIFの元のサイズの約64％、可逆圧縮を使用した場合は19％小さくできるとしています。
GIF形式とWebP形式の機能比較
| 機能 | GIF | WebP |
|---|---|---|
| 圧縮 | 可逆圧縮 | 可逆圧縮 + 非可逆圧縮 |
| RBGカラーサポート | 8bit | 24bit |
| アルファチャネルサポート | 1bit | 8bit |
アニメーションGIFの圧縮時も有効
この強力な可逆圧縮と非可逆圧縮の組み合わせで、アニメーションやビデオでGIF形式を使う場合よりも、はるかに小さいサイズにできる可能性があります。
SEO対策に大いに貢献
何と言ってもWebP画像の高い圧縮率でサイズが小さくなればページ表示速度が上がります。
それはSEO対策に大きく貢献する事になるのです。
WEBページの表示速度が高い程SEO順位の評価が上がるとされているためです。
詳細はコアウェブバイタルをご覧ください。
ページサイズの軽量化例
実際にGTmetriのJPG対WebPを使用してページ比較テストを実行し、ページサイズの全体的な違いを確認してみました。
それによると総合的なページサイズがJPEGによる構成の場合「2.98MB」だったのに対し、WebPの構成に変更した後は「678KB」に軽量化されています。
つまりWebPに画像を変更する事でページサイズが77％減少した事になります。
これだけ軽量化できればモバイルでもサクサクでしょうから、SEO的に評価せざるを得ないですよね
WebP形式のデメリット
基本的にMacやWindowsのOSでは、WebP形式はデフォルトでは扱えません。まだサポートされていない状態なのです。
Photoshopではデフォルトでは書き出せず、プラグインを入れる必要があります。
ですので画像の作成・書き出し作業が煩雑になる点が挙げられます。
ですのでWebP画像をダウンロードして利用する必要がある場合は、注意が必要です。
WebP画像の作り方・変換方法
それではJPEGやPNGの画像をWebP形式に変換できるツールをいくつかご紹介しましょう。
squoosh
GoogleChromeの開発チームが考案したWEBツールです。
画像をドラッグアンドドロップすると、画質の劣化などを確認しつつ変換する事が可能です。
1枚のみ変換したい場合や、ファイルサイズの削減具合をテストする場合に利用できます。
squooshはこちらから
それ以外のWEBツール
Google以外の他社でもツールが提供されています。
WebP変換ツール
WebPShop
Photoshopがデフォルトで対応していないため、Googleが公式に出しているPhotoshop用プラグインです。
このプラグインを導入すればファイルをWebPを開いたり変換したりができます。
WebPShopはこちらから
cwebp/dwebp
Google公式のコマンドラインツールです。
コマンドライン操作に慣れている人ならば便利です。複数画像をまとめて変換する事が可能です。
cwebp/dwebpダウンロード・インストール
ダウンロードはこちらから：Downloading and Installing WebP
コマンドツール使うためには直接ダウンロードするか、Homebrewを使ってツールをインストールします。
brew install webp
WebPを取り巻く現在の環境について
各ブラウザの対応状況
当初WebPがリリースされた時、それはGoogleのブラウザとデバイスでのみサポートされていました。
しかし時間の経過とともに、他のプラットフォームがWebP画像のサポートを提供し始めています。
それでもまだ今は過渡期の段階であり、WebPにはまだユニバーサルなサポート環境は整っていません。
デフォルトでこの画像形式を使用したいWebデザイナーにとっては、まだ多くの課題があります。
まだサポートがされてないプラットフォームの例
・InternetExplorer
・Safari
・iOS：Safari
・KaiOSブラウザ
ついにSafariがWebPをサポート
AppleよりSafariの最新バージョンとなる14で、WebPを標準機能としてサポートすると発表がされました。
正確にはベータ版でのサポートなので、正式版で100％サポートがされる保証はまだありません。
画像編集ソフトウェアの対応
例えばImageMagick、PixelmatorおよびGIMP等は、全てWebP形式をサポートしています。
画像編集ソフト「Sketch」であれば、ファイルをWebP形式で書き出しする事ができます。
しかしPhotoshopでは、WebPをネイティブにサポートしていません。
ファイルをWebPとして開いたり保存できるプラグインをインストールする必要があります。
コンテンツ管理システムの対応
一部のサイトビルダー企業はアップロードした画像の形式に関係なく、率先して画像をWebP形式に移行しています。
ShopifyとWixは、WebP形式の画像を自動的に変換して提供する2つのサイトビルダーです。
Wordpressは今のところ、プラグインを入れる事でWebP画像に対応する形です（下記で紹介します）。
WordpressがデフォルトでWebP画像に対応するのは時間の問題ではないでしょうか。
その他プラットフォームの対応
WebPをネイティブでサポートしていないプラットフォームは他にもあります。
今のところ、WebP画像をアップロードしたり、アップロードした画像をWebPへ変換できる拡張機能やプラグインを利用する事になります。
開発者環境で整備が整って来れば、自然とプラットフォーム側でも標準対応されてくると思われます。
WebP画像を表示させる方法
1. WordPressプラグインを導入する
WordPressによる構築サイトであれば、プラグインを導入する事で簡単に対応できます。
よく使われているプラグインとして「EWWW Image Optimizer」と「WebP Express」があります。
「EWWW Image Optimizer」…画像の最適化全般対応のプラグイン
「WebP Express」…WebP専用プラグイン
WebPのみであればWebP Expressで良いのではないでしょうか。
簡単な操作で導入できますし、メディアに画像をアップロードすると自動的にWebPに変換されます。
またApacheとnginxの両方に対応しています。
2. htaccessでファイルを差し替える
.htaccessによる設定は、Apacheサーバーの場合に有効な手段です。
・JPEGやPNGファイルの読込時
・同名のWebPファイルはアップロード済み
・WebP対応ブラウザである
上記の上限が整った場合にWebPファイルを表示する処理です。
.htaccess記述例
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$ RewriteCond %{REQUEST_FILENAME}\.webp -f RewriteCond %{QUERY_STRING} !type=original RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp
環境によって適宜変更して下さい。
3. pictureタグを利用する
pictureタグはHTML5から実装されたタグで、IE以外のほぼ全てのブラウザで使用できます。
<picture> <source srcset="img/img01.png.webp" type="image/webp"> <img src="img/img01.png"> </picture>
IEで使う場合はポリフィルを読み込んだ上で処理しますが、ここでは割愛します。
まとめ：WEBサイトは表示速度がSEO上重要に
Googleはこの新しい画像フォーマットWebPの開発に苦労しました。
その成果もあり、多くのブラウザ、デザインアプリケーション、コンテンツ管理システムがそれをサポートしようとしています。
それも全て、WEBサイトの表示速度がWEBサイトの価値を決め、SEOの順位決定の大きな要因となる事が決まったためです。
画像の読込速度がモバイル端末に影響
画像はWEBサイト表示において多くの問題を引き起こす可能性がある要素です。
他の部分がどんなに優れていても、この画像部分の設定ミスがあると、読込表示の面で足を引っ張る事になります。
画像の設定不足・ミスの例
・適切なサイズでアップロードされていない
・圧縮されていない
・キャッシュが有効になっていない
以上が画像がWEBサイトの速度遅延を生み、特にモバイル環境でユーザーを遠ざけてしまう原因となります。
モバイル環境でのユーザー離れを防止するために、Googleはページの表示速度をSEOの重要な要素にしている訳です。
WebP画像に限らず、全ての形式において画像圧縮やサイズには気を配るべきです。
WebP画像の活用がWEBページ全体の表示速度向上に直結
WebPを使用すれば、WEBサイトの表示速度は格段に速くなる事でしょう。
さらに「画質」と「ファイルサイズ」のどちらを犠牲にするかで悩む必要も無くなります。
WebPは画像コンテンツの整合性を維持しながらファイルを効率的に圧縮できる新世代の画像フォーマットです。
あなたがもし本当にWEBサイトの表示速度UPに苦労しているなら、「WebP形式の導入」が最適解かも知れません。
