EC-CUBEのカスタマイズ、ネットショップ制作メモ

主にEC-CUBEを利用したネットショップの制作、カスタマイズや独自機能の開発について

SEOに重要な画像フォーマット、 WebPとICCカラープロファイルについて調べてみた

WebPとICC Profileのテスト

WebPとICC Profileのテスト

今年、2021年の5月からGoogleCore Web Vitalsのスコアを検索結果のランク付に利用する様にアルゴリズムを変更しました。

これにより、今までよりもWebサイトのパフォーマンスSEOで重要な意味を持つ様になり、特に画像をいかに軽くするかは重要になっています。

しかし、EC-CUBEで作られる通販サイトにとって、商品画像などの画像は非常に重要な意味を持ちます。画像の綺麗さがCVRに結構直結します。
ただ、容量の少ない画像であれば良いわけではなく、可能な限り少ない容量で美しい画像が求められます。

今回は、Googleも推奨している比較的新しい画像ファイルのフォーマット、WebPとその色について調べてみました。

Core Web Vitalsって何?

Core Web Vitalsの計測結果

Core Web Vitalsの計測結果

Core Web VitalsはGoogleが利用しているWebサイトの「健康度」を示す値です。

サイトの表示速度など色々な指標がありますが、わかりやすく言うと、「どれだけ高速に使いやすいサイトが表示されるか?」です。

Googleの検索結果で利用される数値は、Lighthouseで計測されるラボデータではなく、chrome等のブラウザから日々送信される実際の数値、originのデータが利用されます。

なので、ラボデータのスコアが悪いからと言ってすぐガッカリする必要はありませんが、高いスコアを取っておくと実際のスコアも高くなるので安心です。

いきなり結論!現状だとまだsRGBで作って変換がベスト!

色々試したみたのですが、現状だとsRGBで作業して、ICCプロファイル付きで出力した画像をICCプロファイル無しに変換するのがベストです。クオリティは75で十分でした。

以下、その詳細です。

EC-CUBE4での画像変換の

お問い合わせはこちら

WebPとは?

WebPとはGoogleが中心となって策定した比較的新しい画像ファイルのフォーマットです。その名の通り、Webに最適化することを目的としデータ量の高い圧縮率が特徴です。

jpgやpngと比較しておおよそ10分の1程度の容量にデータ量を圧縮できます。

developers.google.com

しかし、古いブラウザは対応しておらず、PhotoShop等の画像編集ツールでもWebP出力に対応していないソフトがまだ多いのが現状です。

なので実際に利用する場合は、WebPに対応しているブラウザに対してはWebPを返し、それ以外のブラウザには従来のjpgやpngを返す様にWebサーバの設定が必要です。

ちなみに、EC-CUBE Ver. 4.1.0はこれに対応しています。

github.com

最近だとほとんどのスマホは対応しており、そろそろ実戦投入した方がメリットが大きくなってきました。

WebPで誤解されがちな問題

画像の容量を10分の1にも圧縮できるWebPですが、「画像が汚くなる」「色が変わる」などの問題を言う人がよくいます。

実はちゃんと変換すればそんなことはなく、元画像の色空間とWebPとして出力され、ブラウザで解釈される色空間の違いによりこういった問題がおきてしまいます。

ICC カラープロファイルとは?

Color range of sRGB

この色空間を管理しているのが、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で変換する場合は、このプラグインが必要です。

github.com

PC(chrome)での見え方

今回、AdobeRGB設定でRAW撮影したデータをそれぞれのプロファイルに変換してICCプロファイル付きでjpg出力し、それをwebpに変換して見え方など色々比較してみました。

www.xross-cube.com

変換前のJPGの表示

chrome上でのICCプロファイル付きjpg画像の見え方

PC(MacBook Air)のchromeでの表示です。

変換前の元のjpg画像ですが、sRGBが微妙にくすんでいる様に見えますが、これは元がAdobeRGBで、それをsRGBに変換したためだと思います。sRGBで表現できないライターの鮮やかな色とかが少し削られています。
しかし、それ以外は概ね変わりなく、元の画像とほぼ同じ表示です。

cwebpコマンドでWebPに変換した画像

cwebpコマンドでjpgからICCプロファイル付きで変換したWebP画像のchrome上での表示

jpgに比べ、全体的に彩度が少し下がりましたが、概ね良好な表示です。

PHPのGD関数で変換したWebP画像

PHPのGD関数でWebPに変換した画像のchrome上での表示

PHPのGD関数は、WebPへの変換時にICCプロファイルの情報を捨ててしまうので、カラープロファイル無し(= sRGB画像)として処理されてしまうので、sRGB以外はかなり色がくすんでしまっています。*1

スマホiPhone mobile Safari)で見た場合

元のJPG

iPhoneでの元のjpg画像の表示

概ねPCで見た場合と同じです。

cwebpで変換したWebP

cwebpコマンドでWebPに変換した画像のiPhoneでの表示

面白いことに、AdobeRGBのプロファイル付きも色がおかしくなってしまいました。

どうもmobile SafariICCプロファイル付きのWebP画像には対応していない様です。

PHPのGDで変換したWebP

PHPのGD関数で変換したWebP画像のiPhone上での表示

やはり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分長く待たなければなりません。

WebPのfast 3G環境での転送速度

fast 3G環境での転送速度

実際にはHTTP/2等でパラレルでダウンロードされるので、そこまでの差は出ませんが、それでも2秒で表示されるのと8秒で表示されるのでは大きく違います。

まとめ

以上のことから、2021年10月現在では、WebPを使うならsRGBでICCプロファイル無しがベストです。

画像はLargest Contentに選ばれることも多いので、可能な限り軽くしておくのがSEOの観点からも、ECサイトCVRの面でも良いと思います。

大きな商品画像とかはICCプロファイル付きのJPGでも良いかも

日本で大きなシェアを占めるiPhoneのディスプレイはP3に対応しています。

そこまで高性能な液晶で商品画像をより魅力的に見せるためには、転送速度が遅くなることはある程度割り切って、例えば商品の拡大画像はP3プロファイルのJPG画像でも良いかもしれません。

アパレルや化粧品など、色がシビアな商品は、より実物の色に近い商品画像を見せる方が良いからです。

商品画像をクリックしてから表示される拡大画像は、CWVでもスコアの対象にはなりません。大きく色の再現度の高い商品画像をPWA的にバックグラウンドでダウンロードしておけば、表示速度、ユーザへの訴求でもより良い効果が期待できそうです。

EC-CUBE4での画像変換の

お問い合わせはこちら

*1:GDのコミュニティでもこの辺りのことは議論されています。

github.com