SEOに重要な画像フォーマット、 WebPとICCカラープロファイルについて調べてみた
今年、2021年の5月からGoogleはCore Web Vitalsのスコアを検索結果のランク付に利用する様にアルゴリズムを変更しました。
これにより、今までよりもWebサイトのパフォーマンスがSEOで重要な意味を持つ様になり、特に画像をいかに軽くするかは重要になっています。
しかし、EC-CUBEで作られる通販サイトにとって、商品画像などの画像は非常に重要な意味を持ちます。画像の綺麗さがCVRに結構直結します。
ただ、容量の少ない画像であれば良いわけではなく、可能な限り少ない容量で美しい画像が求められます。
今回は、Googleも推奨している比較的新しい画像ファイルのフォーマット、WebPとその色について調べてみました。
- Core Web Vitalsって何?
- いきなり結論!現状だとまだsRGBで作って変換がベスト!
- WebPとは?
- PC(chrome)での見え方
- スマホ(iPhone mobile Safari)で見た場合
- ファイル容量はやはりWebPが圧倒的に軽い
- まとめ
Core Web Vitalsって何?
Core Web VitalsはGoogleが利用しているWebサイトの「健康度」を示す値です。
サイトの表示速度など色々な指標がありますが、わかりやすく言うと、「どれだけ高速に使いやすいサイトが表示されるか?」です。
Googleの検索結果で利用される数値は、Lighthouseで計測されるラボデータではなく、chrome等のブラウザから日々送信される実際の数値、originのデータが利用されます。
なので、ラボデータのスコアが悪いからと言ってすぐガッカリする必要はありませんが、高いスコアを取っておくと実際のスコアも高くなるので安心です。
いきなり結論!現状だとまだsRGBで作って変換がベスト!
色々試したみたのですが、現状だとsRGBで作業して、ICCプロファイル付きで出力した画像をICCプロファイル無しに変換するのがベストです。クオリティは75で十分でした。
以下、その詳細です。
WebPとは?
WebPとはGoogleが中心となって策定した比較的新しい画像ファイルのフォーマットです。その名の通り、Webに最適化することを目的としデータ量の高い圧縮率が特徴です。
jpgやpngと比較しておおよそ10分の1程度の容量にデータ量を圧縮できます。
しかし、古いブラウザは対応しておらず、PhotoShop等の画像編集ツールでもWebP出力に対応していないソフトがまだ多いのが現状です。
なので実際に利用する場合は、WebPに対応しているブラウザに対してはWebPを返し、それ以外のブラウザには従来のjpgやpngを返す様にWebサーバの設定が必要です。
ちなみに、EC-CUBE Ver. 4.1.0はこれに対応しています。
最近だとほとんどのスマホは対応しており、そろそろ実戦投入した方がメリットが大きくなってきました。
WebPで誤解されがちな問題
画像の容量を10分の1にも圧縮できるWebPですが、「画像が汚くなる」「色が変わる」などの問題を言う人がよくいます。
実はちゃんと変換すればそんなことはなく、元画像の色空間とWebPとして出力され、ブラウザで解釈される色空間の違いによりこういった問題がおきてしまいます。
ICC カラープロファイルとは?
この色空間を管理しているのが、ICC カラープロファイル(ICC Color Profile)というものです。
sRGBとかAdobeRGBとかを見かけたことがあると思いますが、これが色空間の名前です。特にsRGBは歴史も古く、ほとんどの環境で対応しており実質上のWeb空間でのデファクトスタンダードとなっています。
しかし、このsRGBという規格は古い機器をベースに策定されているので、表現できる色域が狭い(少ない)という問題があります。
ちなみに、最近のiPhoneはsRGBよりももっと表現力の高いP3という規格に準拠したディスプレイになっており、sRGBの画像よりもP3の画像の方が綺麗に(多くの色数で)表示されます。
ぱっと見の印象で「キレイ!」とか「くすんでいる」とかの違いではない事に注意してください。単純にP3やAdobeRGBの方が表示できる色の数が多い、と覚えてください。
WebPへの変換方法
jpgやpng画像をWebPに変換するには、色々な方法があります。
WebサイトやEC-CUBEで使うとなると、PHPのGD拡張を使った変換( imagewebp() )、libwebpのcwebpコマンドとかになると思います。
PHPのGD関数だと
imagewebp($image, 75);
cwebpだとjpgファイルからの変換の場合、
cwebp -q 75 -metadata icc -sharp_yuv -o [OUTPUT_FILE] [INPUT_FILE]
とかになります。
この -metadata icc がICCプロファイルを含めるという意味のオプションになります。
PhotoShopで変換する場合は、このプラグインが必要です。
PC(chrome)での見え方
今回、AdobeRGB設定でRAW撮影したデータをそれぞれのプロファイルに変換してICCプロファイル付きでjpg出力し、それをwebpに変換して見え方など色々比較してみました。
変換前のJPGの表示
PC(MacBook Air)のchromeでの表示です。
変換前の元のjpg画像ですが、sRGBが微妙にくすんでいる様に見えますが、これは元がAdobeRGBで、それをsRGBに変換したためだと思います。sRGBで表現できないライターの鮮やかな色とかが少し削られています。
しかし、それ以外は概ね変わりなく、元の画像とほぼ同じ表示です。
cwebpコマンドでWebPに変換した画像
jpgに比べ、全体的に彩度が少し下がりましたが、概ね良好な表示です。
PHPのGD関数で変換したWebP画像
PHPのGD関数は、WebPへの変換時にICCプロファイルの情報を捨ててしまうので、カラープロファイル無し(= sRGB画像)として処理されてしまうので、sRGB以外はかなり色がくすんでしまっています。*1
スマホ(iPhone mobile Safari)で見た場合
元のJPG
概ねPCで見た場合と同じです。
cwebpで変換したWebP
面白いことに、AdobeRGBのプロファイル付きも色がおかしくなってしまいました。
どうもmobile SafariはICCプロファイル付きのWebP画像には対応していない様です。
PHPのGDで変換したWebP
やはりPCで見た場合と同様にくすんでしまっています。
ファイル容量はやはりWebPが圧倒的に軽い
次にそれぞれの画像のデータ量ですが、以下の通りです。
sRGB | AdobeRGB | P3 | ProPhoto | |
---|---|---|---|---|
JPG + ICC Profile | 320KB | 304KB | 304KB | 294KB |
WebP + ICC Profile | 37KB | 33KB | 37KB | 33KB |
WebP without ICC Profile | 30KB | 28KB | 29KB | 29KB |
ICCプロファイル無しの方が、データが数KB軽いので、どうせsRGBとして解釈されるなら最初からICCプロファイル無しでWebPで作った方が全体として軽くなります。
この750px × 500pxの画像でWebPの場合の転送速度はfast3G設定で2sとかです。それに対しJPG画像は8.24sとかで、その差約4倍です。
仮にこの画像をEC-CUBEの商品一覧に利用した場合、
WebP: 2s × 20画像 = 40s
JPG: 8.24s × 20画像 = 164.8s(2分44秒)
となり、WebPよりも2分長く待たなければなりません。
実際にはHTTP/2等でパラレルでダウンロードされるので、そこまでの差は出ませんが、それでも2秒で表示されるのと8秒で表示されるのでは大きく違います。
まとめ
以上のことから、2021年10月現在では、WebPを使うならsRGBでICCプロファイル無しがベストです。
画像はLargest Contentに選ばれることも多いので、可能な限り軽くしておくのがSEOの観点からも、ECサイトのCVRの面でも良いと思います。
大きな商品画像とかはICCプロファイル付きのJPGでも良いかも
日本で大きなシェアを占めるiPhoneのディスプレイはP3に対応しています。
そこまで高性能な液晶で商品画像をより魅力的に見せるためには、転送速度が遅くなることはある程度割り切って、例えば商品の拡大画像はP3プロファイルのJPG画像でも良いかもしれません。
アパレルや化粧品など、色がシビアな商品は、より実物の色に近い商品画像を見せる方が良いからです。
商品画像をクリックしてから表示される拡大画像は、CWVでもスコアの対象にはなりません。大きく色の再現度の高い商品画像をPWA的にバックグラウンドでダウンロードしておけば、表示速度、ユーザへの訴求でもより良い効果が期待できそうです。
*1:GDのコミュニティでもこの辺りのことは議論されています。