8知っておくべきEコマース画像最適化のハック
商品をGoogleで検索しても、商品の画像が表示されないのはなぜだろうと思ったことはありませんか。
新しいランディングページのその大きな商品画像が、顧客の読み込み速度を遅くする可能性があるのではないかと思いますか？
コンバージョンはどうですか？画像を最適化していないために、ウェブのコンバージョンに苦しんでいますか？
最適化されていない画像は、サイトのパフォーマンスに悪影響を与える可能性があるため、コンバージョンに悪影響を与える可能性があります。
そして、顧客維持についてはどうですか？
顧客維持をわずか5％増やすと、利益を95％増やすことができます。
また、現在の顧客を維持するよりも、新しい顧客を獲得する方が5〜25倍の費用がかかります。
ほとんどのマーケターはコーダーやデザイナーではありません。しかし、それはあなたがあなたのコンバージョンと保持においてそのような大きな役割を果たしている技術の基本を理解するべきではないという意味ではありません。
これは、画像を最適化する方法を完全に知っている必要があることを意味します。
画像の最適化を理解することが非常に重要である理由は次のとおりです。
画像はウェブサイトの他のどの部分、特にeコマースサイトよりも多くのバイトを占めるため、画像のサイズと複雑さにより、ウェブのパフォーマンスが向上または低下する可能性があります。
そして、それは顧客維持とコンバージョンに影響を与えます。
これが、画像の最適化がWebサイトのパフォーマンスとSERPランキングを向上させるための最良の方法の1つである理由です。
HTTPアーカイブから下のグラフを見てください。 2018年3月現在、画像はWebサイトコンテンツの50％を占めています。
httpアーカイブ
ご覧のとおり、画像の最適化は、マーケター、特にWebサイトで訪問者を購入者に変えようとしているマーケターにとって最優先事項である必要があります。
この記事では、画像を最適化するための上位8つの方法を説明します。これらの最適化ハックは、コンバージョン、SEOランキング、顧客維持などを改善します。
ニール・パテルとの相談
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
1.さまざまなファイルタイプに精通する
ファイルの種類がわからないと、どのファイルの種類を使うか決めることができませんよね？
マーケターは、これらのファイルタイプが存在することを知っています。そして、私たちは皆、良いGIFが大好きです。
しかし、繰り返しになりますが、マーケターは開発者や設計の専門家ではないことがよくあります。そして、テクノロジー主導のマーケティングが進むほど、いくつかの基本に精通することがより重要になります。
これらのファイルタイプの目標は、どのファイルタイプがより少ないスペースでより多くの効果をもたらすかを理解することです。
顧客の読み込み時間を短縮することがすべてなので、サイトの画像に最適なファイルの種類を知る必要があります。
3つの主要なファイルタイプの長所と短所を見てみましょう。
JPEGまたはJPG（Joint Photographic Experts Group）
JPEGは、青、赤、緑の光を混合し、何百万もの色を表示できるため、写真や画像に最適なファイルタイプであることがよくあります。
他の種類のファイルでは、多くの場合、すべての色を画像に表示することはできません。
JPEGファイルのもう1つの大きな利点は、ファイルサイズを調整できることです。
JPEGのファイルサイズを調整すると、品質も調整されます。品質が高いほど、ファイルサイズも大きくなります。ただし、画質とサイズのバランスがうまく取れていることがよくあります。
ファイルサイズが大きすぎないことが重要です。これにより、読み込み時間が遅くなり、顧客を遠ざけ、バウンス率を上げます。
いつJPEGを使用する必要がありますか？
ほとんどの場合、すべての商品画像に表示されます
写真画像
多くの色の画像
Zapposからのこれらの製品写真のように：
zapposメンズスニーカー
GIF（グラフィック交換フォーマット）
AppleとAndroidが携帯電話のキーボードにGIFを組み込んだ数年前、小さなビデオは誰もが自分自身を表現するためのお気に入りの方法になりました。
しかし、GIFは単なる楽しい小さなビデオではなく、写真やビデオの圧縮バージョンです。これらの小さな圧縮ビデオでは、画像に256色しか表示できません。
高品質の画像には、何千もの色が含まれている場合があります。
つまり、色のバリエーションが多い画像にはGIFが最適ではありません。ただし、GIFは、巨大なファイルサイズなしでアニメーションを実行できるため、アニメーションの唯一の選択肢です。
いつGIFを使用する必要がありますか？
すべてのアニメーション
小さな画像（サムネイルやアイコンなど）
数色しかない画像（ロゴなど）
グーグルのためにこれのように：
グーグルロゴgif
PNG（ポータブルネットワークグラフィックス）
PNGはJPEGやGIFよりも新しいものです。通常、ファイルサイズはJPEGよりも大きくなりますが、品質は向上します。また、2つの異なるファイルタイプがあるため、ある程度の柔軟性もあります。
PNG-8：GIFと同じ256色を可能にする小さなファイル。
PNG-24：このタイプでは、数百万色を使用できます。これは、ファイルサイズよりも品質が重要な画像に最適な形式でもあります。
PNGファイルはいつ使用する必要がありますか？
ファイルサイズよりも画質が重要な場合
Zena Hollowayのウェブサイトからのこれらの写真のように：
禅ホロウェイのウェブサイト
プロのヒント
：カラフルで堅牢な画像にはJPEGを使用し、シンプルな画像にはPNGを使用します。何かをアニメーション化する必要がある場合は、GIFを使用します。
Eコマースマーケターは、ほとんどの場合、製品の写真にJPEGを使用する必要があります。以下のファイルタイプの比較をご覧ください。
ファイルタイプの比較
JPEGは、ファイルサイズと品質のバランスが取れています。
2.変換を増やすために、画像ファイルのサイズを正しく取得します
「画像サイズ」と「ファイルサイズ」には大きな違いがあります。
「画像サイズ」とは、852x852などの画像のサイズを指します。
画像サイズテスラレディースパーカー
ファイルサイズとは、サーバーに画像を保存するために必要な容量のことです。
ファイルサイズが大きいほど、画像の読み込みに時間がかかります。
画像のサイズを大きくしても、2MB以下にすることができます。
ファイルサイズは重要です。サイトにアクセスするたびにすべての画像をダウンロードする必要があるため、サイトのパフォーマンスが向上または低下する可能性があります。
目標は、画像のサイズを1〜2MBに保つことです。画像サイズが小さいほど、読み込み速度が速くなり、バウンス率が低くなり、顧客の満足度が高まります。
ウェブパフォーマンスに最適化されるように画像ファイルのサイズを変更する方法：
フォトショップがなくても心配いりません。 Pixlrは、画像ファイルのサイズをすばやく変更する方法です。
まず、PIXLRに移動し、エディターをクリックします。
pixlrエディター
次に、PixlrEditorまたはPixlrExpressのいずれかを起動します。簡単なサイズ変更を行うだけの場合は、PixlrExpressが最適です。
ピクスラーエクスプレス
次に、画像をエディタにアップロードします。
最後に、画像を保存してサイズを調整します。画質バーを切り替えると、選択した品質に応じてファイルサイズも増減することに注意してください。
pixlrの写真編集
必要な品質に適したファイルサイズを見つけることになると、少し試してみる必要があるかもしれません。
いくつかのサイズを試してみて、それでも見栄えのする最小のファイルサイズを使用してください。
サイズと品質の比率がわかったら、それをストア内の同様の画像に適用できます。
この比率をどこかに書き留めておくことをお勧めします。
3. SEOを改善するために、ファイルに正しく名前を付けます
画像に名前を付けることは、検索エンジンのWebクローラーにとって重要です。
多くのマーケターは、写真の名前を、コンピューターや電話によって割り当てられた乱数やコードから変更しません。
検索ボットが画像の表示内容を理解できるように、画像にわかりやすい名前を付けることが重要です。
たとえば、左側の子犬の画像の名前は、右側の画像よりもはるかに優れています。
コーギー子犬のファイル名
画像89374504には何の反感もありませんが、画像が何であるかはわかりません。
優れた画像名はわかりやすく、画像のキーワードが含まれています（NYCで採用されているコーギーなど）。
青いスエードの靴を販売している場合は、画像名に青いスエードの靴を含める必要があります。
画像から最高のSEOの結果を得るには、わかりやすく説明的なものにしてください。
4.altタグを使用してすべての顧客がサイトにアクセスできるようにします
代替タグは、ウェブサイトのコード内に存在する画像に付けられた説明です。これは基本的に、画像の内容がウェブサイトのコードに書き込まれていることを意味します。
Altタグは、次の3つの重要な方法で役立ちます。
スクリーンリーダーを使用している視覚障害者は、alt属性が原因で画像が何であるかを知っています。画像の上にカーソルを置くと、スクリーンリーダーは文字通りalt属性の説明を読み取ることができます。
これは、画像を正しく読み込めない場合に何が表示されるかをブラウザに通知するコード行です。これは、サイトに読み込みの問題がある場合に便利です。
SEOクローラーはそれらを読み取り、SEOの改善に役立ちます。
たとえば、この限定版のゴールデンシトラスフォーミングハンドウォッシュの代替テキストは「フォーミングハンドウォッシュ」です。
メソッドフォーミングハンドウォッシュ代替テキスト
alt属性の主な目標は、それらが説明的で、シンプルで、的確であることを確認することです。ファイル名とよく似ています。
WordPressで代替テキストを設定する
WordPressでホストされているウェブサイトに画像をアップロードするときに、タイトルとalt属性の両方を画像に付けるオプションがあります。
ワードプレスの代替テキスト
独自のaltタグを作成しない場合、WordPressは自動的にaltタグをタイトルと同じにします。
これは、視覚障害のある顧客に何を伝える必要があるかによって、良い場合と悪い場合があります。
たとえば、画像名がblue-bootsの場合、alt属性にさらにいくつかの詳細を追加することができます。たとえば、blue-hiking-boots-mens-size-10です。
alt属性を変更または追加する場合は、画像設定に移動して属性の名前を変更するだけです。
代替属性は、Webサイトを完全に最適化しようとしている人にとって必須です。ユーザーエクスペリエンスを向上させ、SEOにも役立ちます。
5.サイトマップを使用して画像をGoogleに通知します
あなたのeコマースストアには画像ギャラリーがありますか？召喚状や電子メールのサインアップなどのポップアップはどうですか？
最近、消費者はインフォグラフィック、ミーム、ビデオを愛しています。何だと思う？それらもサイトマップに追加する必要があります。
すべてのサイトマップ
これらの画像と動画をGoogleのアルゴリズムに合わせて最適化する必要があります。
では、サイトマップとは何ですか？ Googleを引用するには：
「サイトマップは、サイトのWebページを一覧表示して、サイトコンテンツの構成についてGoogleや他の検索エンジンに通知できるファイルです。」
これにより、Googlebotなどの検索エンジンのWebクローラーがサイトをインテリジェントにクロールできます。
つまり、サイトのすべてのコンテンツのマップを含むファイルです。
サイトマップの例を次に示します。
サイトマップコードの例
ビデオエントリには、次のものを含める必要があります。
タイトル
説明
再生ページのURL（場所）
サムネイルURL
生のビデオファイルのURLおよび/またはビデオプレーヤーのURL
画像エントリには、次のものを含める必要があります。
場所（場所、または画像が配置されているURLは必須です。他のすべての箇条書きはオプションですが、推奨されます）
タイトル
説明
キャプション
ライセンス
以下は、Zapposのサンプルビデオサイトマップです。
大量の画像や動画がある場合は、コンテンツの種類ごとに個別のサイトマップを作成することをお勧めします。
サイトマップは不可欠です。Googlebots、Bingbots、その他の検索エンジンクローラーにコンテンツを知らせたい場合は、画像や動画などを絶対に追加する必要があります。
サイトがWordPressでホストされている場合は、Yoast SEOを使用して、コンテンツ（画像、ビデオなど）をサイトマップに自動的に追加できます。
Yoast SEOをまだお持ちでない場合は、簡単にインストールできます。
次に、Yoast SEOにコンテンツをサイトマップに追加させるには、有効化ボタンがオンになっていることを確認し、変更を保存します。
6.サムネイルを最適化して、アップセルを促進します
アップグレードした直後にその素晴らしい携帯電話ケースを購入したときのことを覚えていますか？
お支払いが完了した直後に、購入確認ページの下部にそのケースが表示されている可能性があります。
そのサムネイル画像はあなたを売り上げました！これらの画像は、顧客が購入した後、または他の製品を閲覧しているときに、他の製品を顧客に宣伝するための優れた方法です。
Amazonが上部のサムネイルを使用して、類似または関連する製品をクリックするように顧客を誘導する方法を確認してください。
アマゾンサムネイル
アップセルは、最初の購入後に販売者が紹介するアドオン、アップグレード、または追加の製品です。
サムネイル画像は、ページの下部に一度に多数表示されることがよくあります。 J.Crewシャツの商品ページの下部に表示されているように。
jcrewシャツページ
目標は通常、アップセルです。カートまたは購入ページの下または上に関連商品を絶対に表示し、顧客にクリックを促す必要があります。
ただし、これらのサムネイル画像が読み込まれない場合は、大量の潜在的なビジネスを逃していることになります。
たとえばGoogle広告を通じて顧客がサイトに到着すると、そこに到達するための料金はすでに支払われています。したがって、購入すればするほど、顧客獲得コストは低くなります。
したがって、サムネイル画像が小さいという理由だけで、ビジネスの収益性にとってそれほど重要ではないサムネイル画像を無視しないでください。
それらはファイルサイズが非常に小さい必要があります。 70KB未満が理想的です。
JPEGまたはGIFファイルとして最適です。ファイルのサイズを変更する必要がある場合は、Pixlrを使用してください。
また、サムネイル画像に名前を付けることを忘れないでください。彼らはあなたの製品写真のようにしっかりした名前とalt属性を必要とします。
これらのサムネイル画像を最適化することで、SEOを改善し、各Webコンバージョンから得られる利益を増やすことができます。
7.画像の技術的側面と美的側面の両方をキャプチャします
eコマースサイトの画像の技術的側面と美的側面の両方を理解することが重要です。
1.テクニカル画像：これらは、画像サイズ、ファイルタイプ、解像度などに焦点を当てたい画像です。次のようなものです。
マストミルクチョコレート
商品画像は、ファイルサイズが大きすぎない高品質のJPEGである必要があります（上記で説明したように）。
2.美的画像：これらは、製品のスタイリング、背景色などに焦点を当てる必要がある画像です。次のような画像を使用してください。
マストミルクチョコレート画像バリアント
影の効果ときれいな灰色の背景を見てください。
8.変換と保持を改善するためのA/Bテスト画像
マーケターは良いA/Bテストが大好きですよね？さて、あなたの画像は規則の例外ではないはずです。
画像が多すぎる、読み込み時間が遅すぎる、または画像の角度が間違っていると、会社の売り上げが失われる可能性があります。
画像をテストするためのいくつかのベストプラクティスは次のとおりです。
•数量：製品ごと、カテゴリごと、ページごとなど、多数の画像と少数の画像の間でテストします。各製品の下に表示するサムネイルの数をテストすることもできます。
数量をテストすることで、顧客にとって何が最善かを判断できます。
•ファイルサイズと品質：高品質と低速の読み込み時間がサイトのコンバージョンに影響するかどうかをテストできます。
たとえば、デザイナーハンドバッグなどのより高価な製品を使用している場合、顧客は高品質の画像が読み込まれるのを喜んで待つ可能性があります。
そうすれば、購入前にズームインおよびズームアウトして詳細を確認できます。
•顧客がどの画像を好むかをテストする：顧客は最新の画像の上面と側面の両方を見たいと思うかもしれません
靴。
または、学習する角度が少ないほど、コンバージョン率が高くなる可能性があります。テストするまでわかりません。
A / Bテストを行うときは、一度に1つの変数のみをテストすることが重要であることを忘れないでください。
たとえば、カテゴリページにある画像の量をテストする場合は、同時に画質をテストしないでください。
一度に複数の変数をテストする場合、どの変数がより高いまたはより低いコンバージョンをもたらしたかはわかりません。
A / Bテストのより完全なガイドについては、この記事を確認してください。
これが私のお気に入りの画像最適化ツールのいくつかです
これらの新しい画像最適化ハックのすべてで、目標を達成するのに役立ついくつかのツールが必要になります。
これがあなたの旅に役立つ私のお気に入りのツールのリストです。
画像のサイズと品質
Pixlr：前述のように、この無料ツールを使用して画像を編集したり、JPEGファイルのサイズや品質を増減したりできます。
ImageOptim：このツールで品質を損なうことなく画像を圧縮してファイルサイズを小さくします。 （Macのみ）
Kraken：画像をまとめてアップロードし、一度にすべて圧縮し、zipファイルとしてダウンロードして時間を節約します。
WordPressプラグイン
Yoast SEO：alt属性を自動的に割り当てることで、画像のSEOとサイトのアクセシビリティを最適化します。
ShortPixel：WordPress内で画像サイズを最適化する
EWWW画像オプティマイザー：画像がサイトにアップロードされるときに、画像を自動的に最適化します。
結論
画像を最適化するためのツールがたくさんある理由は簡単にわかります。それはあなたのビジネスに大きな影響を与える可能性があります。
特にEコマースビジネスでは、画像のサイズとファイル名に注意を払う必要があります。
これは、eコマースサイトは通常、他の業種よりも多くの画像を持っており、コンバージョンを獲得するためにそれらの画像に依存しているためです。
わかりやすい画像名とalt属性から始めて、Googlebotが画像をクロールできるようにし、サイトのアクセシビリティを向上させます。
次に、サイトマップを実装して、検索エンジンのクローラーがさらに簡単にアクセスできるようにします。
読み込み時間を改善し、より多くのトラフィックを変換するために、品質を犠牲にすることなく、画像を可能な限り最小のサイズに保ちます。
サムネイルを最適化し、それらを使用して顧客をアップセルします。
最後に、コンバージョンと顧客維持を改善するためのA/Bテスト。ただし、一度に1つの画像変数のみをテストして、どの変更が影響を与えているかを確認してください。
これらの8つの画像最適化ハックを実装すると、ランキングと収益が確実に向上します。
どの画像最適化ハックがあなたのビジネスに最適ですか？
