顧客が即時の満足を期待する世界では、ECウェブサイトの読み込み速度を速くすることが極めて重要です。反応速度の速い画像を使用すれば、読み込み時間やコンバージョン率の向上に役立ちます。
画像の品質は高いコンバージョン率を確保するのに重要ですが、画像の最適化はオンラインストアのユーザーエクスペリエンスやSEOをケアする鍵になります。画像を最適化する方法を学ぶなら、ブランドイメージの向上やGoogle画像検索を利用する買い物客を引き付けることにつながり、大きなリターンが得られます。
画像最適化とは何ですか？
画像最適化とは、デスクトップやモバイルで画像が完璧に表示され、ウェブパフォーマンスを妨げないようにすることを指します。画像のフォーマット、サイズ、解像度をデバイスに合わせて変更し、品質を維持することが含まれます。
重要な3つの要素があります。
- 画像ファイルフォーマット
- 画像の寸法（高さと幅）
- 画面解像度
なぜ画像を最適化する必要があるのですか？
画像は良好なオンラインショッピング体験にとって重要です。顧客は商品を見られなければ購入しません。HTTP Archiveのデータによると、最適化されていない画像は、モバイルのウェブページ当たりの重量の平均約38%を占めています。
画像最適化はウェブページの重量を軽減しますし、優れたECウェブデザインの基本原則の一つでもあります。画像最適化する利点は次のとおりです。
速度と品質のバランス
ウェブとモバイル用の画像最適化の目的は、速度と品質のバランスを取ることです。見栄えの良い画像を提供することはEコマースに欠かせません。買い物客が優れたブラウジングを経験するためです。
Googleは、サイトの速度がページをランク付けする要素の一つであると示唆しています。ページが遅いと、検索エンジンはクローリング予算の関係でクロールできるページ数が減り、インデックスに悪影響が及ぶ可能性があります。
検索パフォーマンスの向上
画像最適化していれば、読者や検索エンジンがあなたのウェブサイトを理解しやすくなり、コンテンツの可視性が高まります。最近のデータによると、画像はGoogleでの検索クエリの18%に返されます。
画像最適化により、Googleの画像検索で画像がランク付けされやすくなり、ウェブサイトへのトラフィックが増え、ブランド構築の助けになります。
ウェブ用に画像を最適化する方法
1. 簡潔で直接的な画像名を使用する
ウェブサイトに画像をアップロードする際、カメラが割り当てたデフォルトのファイル名をそのまま使用するのは簡単です。しかし、画像SEOの観点からは、関連するキーワードを使用してウェブページの検索エンジンランキングを向上させることが重要です。
キーワードを含む説明的なファイル名を作成することは画像最適化する上で重要です。検索エンジンは、ウェブページのテキストだけでなく、画像ファイル名もクロールします。
例えば、この画像を見てください。
カメラが割り当てた一般的な名前（例：DCMIMAGE10.jpg）を使うこともできますが、ファイル名を2012-フォード-マスタング-LX-赤.jpgのようにする方がはるかによいでしょう。
顧客がウェブサイトで商品を検索する際にどのような情報を入力するかを考えてみてください。上記の例では、車を探している顧客は次のような検索語を使用するかもしれません。
- 2012年型 赤 フォード・マスタングLX
- フォード・マスタングLX 赤 2012
- 赤いフォード・マスタングLX 2012
ウェブサイト分析を確認して、顧客がどのキーワードを使用しているかを見てみましょう。最も一般的な検索名を特定し、画像ファイルの名付けに適用します。
そこまでデータ利用しない場合でも、画像名を付ける際には関連性のある有用なキーワードを使用してください（つまり、説明的な名前を付けてください）。
MozのQ&Aを見ると、サイト上の画像ファイルを戦略的に命名する重要性が分かります。これは確実にオンページSEOを改善する方法です。また、検索エンジン結果ページ（SERP）でページや画像のランキングを向上させるのにも役立ちます。
2. alt属性を慎重に最適化する
alt属性は、ブラウザが画像を正しく表示できない場合に代わりに表示されるテキストです。ウェブアクセシビリティにも使用されます。画像が表示されている場合でも、ホバーするとalt属性のテキストが表示されます（ブラウザの設定によります）。
alt属性を入力するなら、ウェブサイトのSEO上の価値が増します。ウェブサイトの画像に関連するキーワードを含む適切なalt属性を追加するなら、検索エンジンでのランキングが向上する可能性があります。alt属性の追加は、あなたのEコマース商品がGoogleの画像検索やウェブ検索に表示されるようにする一番よい方法かもしれません。
alt属性のソースコードを見てみましょう。
フォード・マスタングのalt属性コード
画像最適化における最優先事項は、サイト上の各商品画像のalt属性を入力することです。
alt属性の入力に関するルールは次の通りです。
- 画像を平易な言葉で説明してください。画像ファイル名と同様です。
- モデル番号やシリアル番号がある製品を販売している場合、それをalt属性に使用してください。
- alt属性にキーワードを詰め込まないでください（例：alt="フォード・マスタング スポーツカー 今すぐ購入 最安値 セール中"）。
- 装飾的な画像にはalt属性を使用しないでください。過剰最適化で検索エンジンからペナルティを受ける可能性があります。
時々、健全性チェックを行ってください。ウェブページのソースを表示し、alt属性が入力済みで、まだ関連性があるかを確認してください。起業家として多忙なスケジュールをこなしていると、基本的なことを見落としている可能性があります。
3. 画像の寸法と商品表示のアングルを最適化する
商品を複数のアングルで表示するのは一般的な慣行です。フォード・マスタングの例に戻ると、車の一枚のショットだけを見せるのでは不十分です。以下のようなショットを見せるのが最善です。
- 内装
- 後部（特にあのスポイラー）
- ホイール
- エンジン（マスタングですから）
追加写真を最大限に活用する一番よい方法は、各ショットに固有のalt属性を入力することです。
- 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> alt属性：alt="2012年型フォード・マスタングLX 赤 レザー内装"
- 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> alt属性：alt="2012年型フォード・マスタングLX 赤 後部ビュー スポイラー"
ここで重要なのは、基本的なalt属性に説明を追加して、潜在的な検索者があなたのウェブサイトにたどり着けるようにすることです。追加の作業を行えば、Google検索したユーザーが引き寄せられるでしょう。
4. 画像をリサイズする
ウェブサイト上の画像を扱う際、すべてのデバイス、特にモバイル画面や高解像度画面できれいに見えるようにする必要があります。
従来のディスプレイと同じ物理的なスペースにもっと多くのピクセルを詰め込む高密度ディスプレイに対応するには、少なくとも2倍の画像が必要です。例えば、ウェブサイトに200ピクセル x 200ピクセルの画像スロットがある場合、高解像度ディスプレイで鮮明に表示されるには400ピクセル x 400ピクセルの画像が必要です。現在、ほとんどのスマホは2倍以上の画面解像度を持っています。
これを達成する最も簡単な方法は、コンテンツ配信ネットワーク（CDN）を使用することです。CDNは画像のリサイズとデバイス別の最適な画像フォーマットの提供を行います。また、エンドユーザーに近いサーバーロケーションを利用するため、画像ファイル自体の読み込み速度も改善します。
💡注意：Shopify加盟店であれば、あなたのShopifyテーマはShopifyの画像CDNを使用しています。
5. 適切な画像フォーマットを選ぶ
画像フォーマットは、ウェブサイトで正しく設定するべき最も重要な要素の一つです。フォーマットによって、品質に差が出ます。また、ファイルサイズが大きくなるフォーマットもあり、サイトの読み込み速度に影響を与えます。
まず、画像フォーマットには主に2つのタイプがあります。ラスターとベクターです。
ベクター画像は数学的な式に基づいて構築されています。品質を損なうことなく異なるサイズにスケールできるグラフィックが必要な場合は、ベクターグラフィックを使用してください。最も一般的なベクター画像は、スケーラブル・ベクター・グラフィックス（SVG）ファイルです。ロゴやアイコン、その他のシンプルなグラフィックに最適です。
ラスター画像は、ピクセルで構成されており、写真のように非常に詳細な画像を形成します。画像が含むピクセルが多いほど、サイズが大きく、高解像度になります。
時代と共に、ラスター画像用の新しく改良されたコーデックが開発されました。例えば、GIFはウェブ用の初期の画像コーデックでしたが、近似ピクセルに平均化する圧縮技術のため、品質が低かったです。新しい技術は、人間の目には分からない方法でコーディングと圧縮を行います。新しい画像フォーマットを使用するなら、高品質の画像を小さなファイルサイズで提供できるようになります。以下のフォーマットが、現在ウェブ上で最も一般的に使用されています。
- JPG： 写真用に広く使用されている画像フォーマット。非可逆圧縮を使用してファイルサイズを削減しますが、品質を多少犠牲にします。
- PNG： 透明な背景を持つグラフィックを扱うため、ウェブデザイナーに人気のフォーマット。圧縮時に元のデータをすべて保持するため、ウェブサイト上のグラフィックやチャートに適しています。
- WEBP： ウェブ用に構築された現代的なフォーマット。非可逆圧縮と可逆圧縮の両方をサポートし、JPGやPNGよりも小さなファイルサイズを提供しながら、同等かそれ以上の品質を維持します。
- AVIF： 最新の画像フォーマットで、画像を効果的に圧縮し、劣化を最小限に抑えます。
あらゆるブラウザがすべてのバージョンをサポートしているわけではありません。ここで再び画像CDNが役立ちます。特定のブラウザに最適なフォーマットを自動的に選択し、元の画像を変換します。この機能を持つCDNを使用しない場合は、HTML内で<picture>タグを使用する必要があります。
💡注意：ShopifyのCDNは、ブラウザがサポートしているファイルフォーマットを自動検出し、最適なオプションを提供します。例えば、サポートされている場合は画像をWebPやAVIFに変換する一方、古いブラウザ用にはPNGやJPEG画像を送信します。
6. 画像サイトマップを使用する
サイトがJavascriptギャラリー、画像ポップアップ、その他の「派手な」方法を使用して全体的なショッピング体験を向上させている場合、画像サイトマップはGoogleに画像を認識させるのに役立ちます。
ウェブクローラーは、ウェブページのソースコードで特に指定されていない画像をクロールできません。したがって、クローラーに未特定の画像を知らせるには、その位置を画像サイトマップに挙げる必要があります。
次の行をrobots.txtファイルに挿入して、サイトマップのパスを示すことができます。
Sitemap: http://example.com/sitemap_location.xml
または、検索コンソールを使用してサイトマップをGoogleに送信することができます。Googleには、SERPでのランキングを向上させるのに役立つ画像公開に関する多くのガイドラインがあります。また、Googleサイトマップを使用して、ウェブサイトの画像に関する情報をGoogleに提供するなら、Googleがあなたの画像を見つけやすくすることができます。
Shopify加盟店は、商品画像を含む自動生成されたサイトマップを受け取ります。これにより、商品ページやブログやコレクションで使用される重要な画像が、サイトマップを通じて検索エンジンに発見されやすくなります。こうして、画像が検索結果に表示される可能性が高まり、ウェブサイトへのトラフィックが増えます。
Shopifyは、ページや商品が追加されたり、削除されたりするたびにサイトマップを自動的に更新します。したがって、手動でサイトマップを作成または更新する必要はありません。
7. 優れた画像コンテンツ配信ネットワーク（CDN）を使用する
専門の画像CDNは、画像変換機能を提供します。つまり、高品質の画像を一度アップロードするだけで、リサイズ、再フォーマット、キャッシュをリクエストごとに行います。Shopifyの画像CDNでは、画像をアップロードする際にファイルサイズが自動的に最適化されます。ファイル品質の変化は人間の目には分かりませんが、ページの読み込み速度が改善されます。CDNは、クライアント側でサポートされているファイルフォーマットを自動検出し、ダイナミックな編集を提供します。これにより、元のファイルを失うことなく画像をトリミングおよび変換できます。
💡Shopify加盟店は、プロフェッショナルサービスチームにアクセスできます。ウェブサイトの速度、コンバージョン率、検索エンジン最適化を向上させる手助けを受けられます。
8. 画像をテストする
画像を最適化する目的は、最終的に利益を増やすことです。ファイルサイズを削減し、検索エンジンに画像をインデックスさせる方法を考えました。でも、どの画像が顧客のコンバージョンに貢献しているかをテストするにはどうしたらよいでしょう？
- ページごとの商品画像の数をテストする。 ホストされていない一部のECサイトでは、読み込み速度が問題となるため、ページ上の画像数を減らすなら、クリック率や売上が増加する可能性があります。また、ページあたりの画像数を増やすならユーザー体験が向上し、売上が増える可能性があります。確認する唯一の方法は、テストすることです。
- 顧客が好むアングルをテストする。 顧客が見たいビューを提供するなら、顧客のロイヤリティが高まるかもしれません。把握するよい方法は、どの商品ショットが一番好きかを顧客に尋ねることです。調査し、顧客と対話することは一般的によい方法ですが、テストで確認してください。
- カテゴリページに表示する商品リストの数をテストする。 10、20、100アイテムでしょうか？カテゴリページにリストする商品数をテストして、顧客にとって最適な数を見つけてください。
画像最適化ツール
画像最適化のベストプラクティスを理解できたところで、ウェブサイトで使用できる画像最適化ツールやプラグインを見てみましょう。
Shopifyを使用している場合や専門の画像CDNを使用している場合、これらのツールを使用する必要はありません。ただし、SVGOMGは例外で、ほとんどの画像CDNはSVGの最適化を提供していません。
Squoosh
Squooshは、使いやすいウェブベースの画像圧縮用アプリです。画像をドラッグ＆ドロップし、JPEG XL、WEBP、PNGなどの最適化された画像フォーマットを選択するだけです。
TinyPNG
TinyPNGは、ウェブ上で人気のある画像最適化ツールです。WEBP、JPEG、PNGファイルの画像ファイルサイズを削減するスマートな非可逆圧縮技術を使用します。
アプリやストア用に画像を縮小したり、アニメーション画像を縮小したりできます。画像圧縮だけでなく、API統合や開発者向けツールも提供し、TinyPNGをカスタムソフトウェアソリューションに統合できます。
TinyPNGのAPIは、サムネイル用に画像を自動的にリサイズし、不要な部分を削除して背景を追加します。WordPressでウェブサイトを運営している場合、プラグインとして利用可能です。
SVGOMG
SVGOMGは、シンプルな画像最適化ツールです。SVGファイルをクリーンアップし、ミニファイするいくつかのオプションを提供します。SVGをアップロードするか、ソースをコピーして開始します。さまざまな調整を施して、元の画像よりも軽量な同一画像を作成できます。
画像最適化で写真の機能性をアップ
画像を最適化することは、オンラインビジネスで成功するのに不可欠です。商品の見栄えを向上させるだけでなく、スムーズなショッピング体験を提供し、オンラインで見つけてもらいやすくします。
ShopifyのようなECプラットフォームは、最適なフォーマットの画像を視聴者に自動配信するため、売上を増やし、オンラインビジネスを成長させることができます。
画像最適化に関するFAQ
品質を損なわずに画像を最適化するにはどうすればよいですか？
品質を損なわずに画像を最適化する一番よい方法は、特定の状況に適した画像サイズとフォーマットを提供することです。この記事に挙げたような手動ツールを使用してファイルを生成し、ブラウザにとって最適なHTMLを書くことができます。または、Shopifyのような専門の画像CDNを使用して、任意のデバイス向けに高品質の画像を自動変換して配信することもできます。
一番よい画像最適化ツールは何ですか？
SquooshやTinyPNGは、優れた画像最適化ツールの例です。どちらもウェブベースのツールで、JPGやPNG画像などのさまざまなフォーマットオプションを提供します。より複雑なSVGがある場合は、SVGOMGを使用して小さくすることができます。
Shopifyで画像を最適化する必要がありますか？
画像をアップロードする前に最適化する必要はありません。最適化すると、品質の低い画像が生成され、コンバージョン率が低下し、返品が増えることがあります。ShopifyのCDNは、Eコマースに適した品質設定で画像を自動的に圧縮します。テーマコードは、Liquidのimage_urlやimage_tagを使用して記述されるため、さまざまなレスポンシブ画像機能を自動的に活用できます。
