見込み客があなたのサイトにたどり着いたとき Shopify ウェブサイト、彼らは画像を使用して購入するかどうかを決定します。 したがって、マーチャントとしてのあなたの仕事は、画像がサイトの読み込み速度を低下させないようにすることです (つまり、人々を遠ざけるために)。 format 画像のサイズを適切に調整します。
これにより、画像が引き伸ばされたり、途切れたりすることがなくなります。 私たちの究極では Shopify 画像サイズ ガイドでは、特定の画像サイズの重要性を示しています。 Shopify 写真、ロゴ、バナー画像、製品画像などに最適なサイズを提供します。
すべてを学ぶために読み続けてください Shopify 画像サイズ！
なぜあなたは気にする必要があるのですか Shopify 画像サイズ?
画像の管理とアップロードは面倒です。 それでも、サイト速度の遅さ、SEO の問題、e コマース サイトでのコンバージョン率の低さなどに関しては、彼らが主な違反者であることがよくあります。
また、すべてのウェブサイト ビルダーと e コマース プラットフォームで注意が必要な点は、画像が最適化され、見栄えがよくなるように、特定の画像サイズに固執する必要があることです。
その理由をまとめると、 Shopify 画像サイズが重要:
- の各画像タイプ Shopify ロゴはバナー画像とは異なるサイズにする必要があるなど、一意のサイズが必要です。
- 右の画像がはっきりと見えると、ユーザーは有料の顧客に変わる可能性が高くなります。 format.
- 適切なサイズの画像と最適化された画像は、SEO の可能性を高めることができます。
- 写真のサイズが小さすぎると、画像が引き伸ばされたり、トリミングされたりして、見苦しい Web サイトにつながる可能性があります。
- 画像のサイズが間違っていると、サイトの速度が低下したり、顧客が待ちきれなくなったりすることがあります。
これらの点に加えて、鮮明で適切なサイズの画像は、一定レベルのプロフェッショナリズムを示し、信頼できるビジネスであり、製品が最高品質であるという感情的な反応を顧客に提供します. 悪い写真は、製品や表示方法に関心がないように見えます。 顧客は、「他に手抜きをしているところはありますか?」と尋ねる場合があります。
そうは言っても、最高のクイックリファレンスガイドをご覧ください Shopify 製品ページ、バナー画像、ロゴなどの領域の画像サイズ。
最高 Shopify 画像サイズ (画像が使用される場所に基づく)
これらすべてが厳密なルールというわけではありませんが、できるだけ「理想的なサイズ」に固執することをお勧めします。 テーマには独自の画像基準がある場合があるため、それに注意してください。 他のwise寸法に余裕があればご説明いたします。
全体で使用する頼りになる画像サイズはありますか Shopify?
いいえ。ただし、そのアプローチを取る予定がある場合は、次のことをお勧めします。
- すべての画像が、商品の複雑な詳細を示すのに十分な大きさであることを確認してください。
- ただし、サイトのパフォーマンスを妨げないように、画像を十分に小さくしてください。
- 経験則として、2048 × 2048 ピクセルを使用することをお勧めします。 square 画像。
- 800 × 800 ピクセルより小さいものは避けてください。 square 画像。
- 4472 × 4472 より大きいものは避けてください。 square 画像。
非square 以下のガイドを使用することをお勧めします。 また、一部のテーマでは画像のトリミング方法が異なるため、オンライン ストアに最適な画像サイズを推測して確認する必要がある場合もあります。
最良のガイダンスについては、理想を見てください Shopify 以下の画像サイズは、すべて画像タイプに基づいて分類されています。
1. Shopify 商品画像サイズ（理想サイズ：2048×2048ピクセル）
製品画像は、販売を行うための主要なメディアとして機能します。 Shopify.
製品画像の推奨寸法 Shopify 2048 x 2048 ピクセルです.
これは、画像がページの速度を低下させないようにすると同時に、顧客が元の写真の豊かさを詳細に確認できるようにするための素晴らしい場所です.
私たちは提案します square 製品写真の画像。 Shopify テーマ。
以下のスクリーンショットは、2048 × 2048 ピクセルとしてアップロードされた画像を示しており、トリミングされていません。
長くて幅の広い画像は製品写真に使用できますが、テーマが画像に与える影響を制御することはできません. 横向きの写真は、縦向きに比べてサイズが小さくなることがあります。 format.
2. Shopify コレクション画像サイズ（理想サイズ：2048×2048ピクセル）
コレクションを追加するのに画像は必ずしも必要ではありませんが、そうすることで、そのコレクション用に個別のページを作成できます。これは、製品の小さなサブセット用に作成されたランディング ページとほとんど同じです。
の下にコレクション画像がアップロードされます コレクションの作成 のセクション Shopify.
その後、製品をそのコレクションに追加して、ホームページのコンテンツ ブロックに表示したり、独自のページとして表示したりできます。
あなたが去ったら 画像 コレクション ページのフィールドが空白の場合、そのコレクションの注目の製品画像の XNUMX つがデフォルトとして使用されます。
推奨される Shopify コレクションの画像サイズは 2048 × 2048 ピクセルです。
square 寸法は標準化を確立するのに役立ちます format すべてのコレクションで、特に隣同士に表示されている場合。
あなたはまたそれを見つけるでしょう square コレクションを紹介するコンテンツ ブロックを利用すると、画像の操作が簡単になります。
いつものように、結果は使用するテーマによって異なる場合があります。 実際、一部のテーマは、コレクション画像にさらに機能を提供し、別のコレクション ページでバナーのように画像を共有できます。 この場合、コレクション画像の最適なサイズは、ここで説明したものとはまったく異なる場合があります。 全体として、最善の行動計画は、テーマでテストを行うことです。 独自のサイズの複数の画像をコレクションにアップロードします。 機能するものを書き留めてから、常にそれらのディメンションを使用してください。 画像が大きすぎたり小さすぎたりしないことを確認してください。
3. Shopify ロゴ画像サイズ（理想サイズ：横450×縦250ピクセル）
ロゴは、e コマース ストアのマーキーとして際立っています。 通常はヘッダー領域内に表示されることを考慮して、誰かがあなたのホームページにアクセスしたときにすぐに表示され、Web サイト全体に表示されます。
Shopify ロゴのサイズに問題があるユーザーは、ロゴが十分に大きくないか、何らかの形でナビゲーション メニューが変形することがあります。 または、ロゴの下または上に多くの余白が残っている場合があります。
これらの問題のほとんどを解決するには、高さ 250 ピクセル、幅 450 ピクセルのロゴのサイズを使用することをお勧めします。
実際には、 Shopify 幅と高さをこれらの寸法より高くしないことをお勧めします。 そうは言っても、テーマが許す限り、小さくすることができます。
サイドバーの表示がおかしくなったり、ナビゲーション メニューの要素が多すぎて、ロゴをおかしな方向に動かしてしまうことがよくあります。 とにかく、ロゴのサイズとサイトの設定をいじって、最高の外観を実現することをお勧めします.
別の方法として、いくつかのテーマは square ただし、250 x 250 ピクセルのマークの下に置いて、スペースを取りすぎないようにしてください。
最も汎用性がある場合は、次の場所に移動してください。 設定 > ブランド in Shopify 追加する デフォルト & Square 画像。 このように、状況に応じてどちらでもアップロードできます。
4. Shopify バナー画像サイズ（理想サイズ：横2000×縦600ピクセル）
通常、ヒーロー画像または画像バナーと呼ばれるこれらは、ホームページの上部に配置して、新製品を紹介し、ボタン付きのテキストを含めることができる大きな画像です. サイズ変更後、およびさまざまなデバイスで表示したときに粒子が粗くなるのを防ぐために、バナー画像は高解像度であることが不可欠です。
Shopify また、持って ヘッダ と同様に機能する content セクション バナー画像 コンテンツセクション。
どちらを選択する場合でも、バナーとヒーロー画像は幅 1200 ピクセル x 高さ 600 ピクセルのサイズに固執することをお勧めします。
そうは言っても、多くの場合、幅は 1200 ～ 2000 ピクセル、高さは 400 ～ 600 ピクセルで十分です。 そしていつものように、それはあなたのテーマに依存します。
最後に、それも wise すべての画像バナーとヒーロー画像の設定を調整します。 ほとんどのテーマでバナーの高さを変更できます。 Shopify コンテンツの背後にある画像がよく見えるように、右下隅や上部など、バナー コンテンツを配置したい場所に配置します。
5. Shopify スライドショーの画像サイズ（理想サイズ：横2000×縦600ピクセル）
バナーと同じように、スライドショーでは高解像度の画像を使用する必要があります。 これらのコンテンツ セクションを使用すると、ページの XNUMX つの領域に複数の写真を表示できます。 次に、次の画像に連続してスライドします。
これらはバナーに非常に似ているため、実際には、ヒーローまたはバナー イメージと同じ幅と高さを維持します。 推奨は、幅 2000 ピクセル、高さ 600 ピクセルです。 ただし、高さは 400 ～ 600 ピクセル、幅は 1200 ～ 2000 ピクセルの範囲で指定できます。
すべてのスライドショー設定を管理して、最高のパフォーマンスを確立してください。 formatあなたのスライドショーのためのティン。 コンテンツ ボックスを別の場所に移動する必要がある場合や、高さを少し広げた方がスライドショーの見栄えが良くなる場合があります。
スライドショーの主なルールの XNUMX つは、同じスライドショーに対して常に同じサイズの画像をアップロードすることです。 別のスライドショーを作成するときにサイズを調整することは大歓迎ですが、継続性とユーザー エクスペリエンスのために、XNUMX つのスライドショーにまとめられた画像がすべて同じサイズであることを確認してください。
最適化する方法 Shopify 画像
画像を最適化すると、e コマース ストアでの写真の読み込み方法が改善されます。 また、画像がショッピング体験を圧倒するのではなく、どのように補完するべきかを見て、ウェブサイトでよりユーザーフレンドリーな体験を作成するのにも役立ちます.
画像を最適化する際に考慮すべき点がいくつかあります。 Shopify. これらの領域には最適な画像が含まれます format、圧縮、画像ソース、スタイリングなど。 画像を最適化するためのベスト プラクティスと手順については、このまま読み進めてください。 Shopify.
ステップ 1: 最適な画像を選択する Format
Shopify 画像サイズは重要ですが、写真の最適化の最初のステップでは、最適な画像を選択する必要があります format.
画像多数あり formatのその Shopify 許可する。
それらが特別な理由は次のとおりです。
- JPEG/JPG: おそらく最も一般的なファイル format 画像の場合、当然そうです。 JPEG は圧縮率が高く、優れた品質を提供します。 特に写真に細かいディテールがある場合は、商品ページに使用することをお勧めします。
- PNG: このファイル タイプは、画像サイズを縮小した後の品質維持において、実際には JPEG よりも優れています。 ただし、PNG はあまり圧縮されないことがあります。 透明な背景 (JPEG ではサポートされていません) が必要な場合に最適なので、ロゴや一部のバナー画像に適しています。
- GIF：GIFはイメージです format アニメーション用。 これは基本的に、短いビデオを動画に変換するようなもので、ビデオのように圧倒的なサイズを使わずに製品を簡単に説明するのに役立ちます。 ホームページ、製品ページ、ブログ投稿で気に入っています。 ただし、GIF は使いすぎないでください。 formatJPEG、TIFF、PNG などです。
- WebP: おそらくすべての画像の中で最も用途が広い formatWebP は、PNG の透過性の利点に加えて、JPEG と PNG の両方よりも強力な圧縮と品質を提供するため、ますます一般的になっています。 言うまでもなく、WebP でアニメーションを作成することもできます。 のすべての種類の画像に WebP を使用することを検討してください Shopify. 将来的には、WebP がインターネット全体でより頻繁に使用されることが予想されます。
それ以外、 Shopify サポート formatHEIC、プログレッシブ JPEG、AVIF などです。 HEICは画像です format Apple デバイス全体で使用される標準。 非常にコンパクトで、XNUMX つの画像に複数の画像を含めることができ、優れた品質を提供します。 ただし、Apple 以外のほとんどのデバイスと互換性がないため、推奨するのは困難です。 AVIF画像 format その高品質と劇的な圧縮率により、かなり強力な利点があります。 つまり、AVIF を使用した場合のパフォーマンスは、実際には JPEG や WebP 画像を使用した場合よりも強力になるはずです。 ただし、しばらく時間がかかります desktop およびモバイル ブラウザでファイルとして採用する format 標準。 そのため、現時点ではお勧めできません。 インターネットに接続しているほぼすべての人が実際に画像をオンラインで表示できるようになるまでは.
画像の使用目的に基づいて、適切なものを選択してください format 上から。 次に、次のステップに進み、Web サイト全体で画像スタイルが同じになるようにします。
ステップ 2: すべての写真で同じスタイルで撮影する
継続性は、e コマースの写真にとって重要です。 ブランドの全体的な外観を確立し、Web サイト全体で標準化された雰囲気を作り出します。
たとえば、ブランドがすべての製品画像に XNUMX つの背景色を使用するのは一般的です。
これは、画像のサイズとスタイルにも当てはまります。 ほとんどの製品画像が横向きである場合は、横向きの写真をいくつか混在させないでください。 ライフスタイルと製品の両方の写真をミックスに組み込むことは大歓迎ですが、ほとんどの撮影で XNUMX つのスタイルに固執することをお勧めします。
ステップ 3: 製品写真とライフスタイル写真の両方を組み合わせて作成する
前述のように、ほとんどの場合、製品写真の大部分に XNUMX 種類の写真スタイルを使用することをお勧めします。 ただし、モノカラーの背景と製品の異なるビューを使用した標準の製品写真を補完するために、いくつかのライフスタイルの写真を含めることが不可欠です.
eコマースビジネスには、顧客がその場で商品を試着したり、触れたりできないという欠点があります。 そこで活躍するのがライフスタイルフォトです。 ユーザーは、実際に製品がどのように見えるかを見ることができます。 シャツが体を覆う様子や、実際に誰かが立っているスケートボードのサイズ。
ステップ 4: 適切なファイル名とタイトルを選択する
すべての画像ファイルには名前があり、 Shopify はそのファイル名を取得し、Web サイトのメタデータで公開します (すべての e コマース プラットフォームがこれを行います)。
したがって、写真を次のように保存すると、 新しい写真(1).jpg あなたのコンピュータ上でそれらをあなたのストアにアップロードすると、検索エンジンには何もありませんformat写真の内容について。 これは SEO に悪影響を与える可能性があります。
画像を最適化するときは、次の手順を実行して、検索エンジン (および視覚障害のあるもの) が画像で何が起こっているかを理解できるようにします。
- 画像の内容を連想させるファイル名を追加します。
- 一般的なファイル名をアップロードした場合は、画像を変更してください 役職 in Shopify. これはデフォルトを置き換えます。
- 画像に表示されているものをより強力に表現するには、alt タグを使用します。 これらは、視覚障害者にとってユーザー エクスペリエンスが改善されていることを示すため、検索エンジンが注目する主な要素です。
ステップ 5: アップロード前またはアップロード中に画像を圧縮する
Shopify サーバーにアップロードされたすべての画像の自動圧縮を提供しますが、それに完全に依存するべきではありません。
あなたの最善の策は、アップロードする前にサードパーティのツールを使用して画像を圧縮することです Shopify、またはインストール Shopify plugin アップロード時に写真を自動的に圧縮します。
アプリのルートに行く方がはるかに簡単ですが、それらのほとんどはサブスクリプションを必要とするため、予算を維持する必要があるかどうかは理解しています.
画像圧縮に適したアプリには次のものがあります。
無料試用版でこれらのアプリをテストして、画像の圧縮率とプロセスの自動化方法を理解してください。 その後、サブスクリプションにコミットできます。 サードパーティのツールについては、 TinyPNG & 画像のリサイズ.
ステップ 6: 無料の画像検索アプリを検討する
e コマース ブランドは (無料の代替品を見つけたり、製造元の Web サイトから写真を取得したりするのではなく) 独自の写真を撮影することを強くお勧めしますが、無料の画像を使用するのに適したオンライン ストアの領域がいくつかあります。
たとえば、ブログの投稿を補完するために、峡谷を見渡す人物の風景写真が必要になる場合があります。 一方、写真をヒーロー画像の背景として使用すると、実際の製品画像と説明を背景の上にドロップできます。
このような状況では、次のクリエイティブ コモンズ ライセンスの画像サイトを使用することをお勧めします。
クリエイティブ コモンズ ライセンスは、画像を無料で取得して Web サイトに掲載できるという意味ではないことに注意してください。 そのような場合もありますが、各画像をチェックして、その使用に対してどのような権利があるかを確認する必要があります。
たとえば、クリエイティブ コモンズ ライセンスでは次のように説明されています。
- 商用・非商用を問わず画像を使用できる場合
- 作成者のクレジットを表示する必要がある場合、または単に推奨されている場合
- 何らかの方法で画像を変更することが許可されている場合
さらに、XNUMXセント硬貨を支払うことなく、サイズ変更、フィルター、トリミングを制御できる無料の画像編集アプリがたくさんあります。
私たちは提案します:
ステップ 7: A/B テストを実行して、最適な画像と Formats
写真に関連するファイル名を付け、サイズを変更し、トリミングし、完璧なものを決定した後 format そしてサイズ、あなたの店でそれらがどのように見えるかを見る時が来ました.
幸いなことに、指を交差させて、画像が変換に最適であることを願ってはいけません. 商品ページ、ランディング ページ、ホームページに同じ画像の複数のバリエーションをアップロードして、コンバージョンの点で最も優れたものを確認できます。
両方 テーマサイエンティスト & 将軍 のいくつかの部分に A/B テスト機能を提供する Shopify のあるサウンドを提供します。
A/B テストの優れている点は、実験に終わりがないことです。 これにより、Web サイトのあらゆる側面を監視できます。 時間の経過とともに勢いを失った画像を交換し、XNUMX つの期間中に複数のテストを実行できます。
Shopify 画像サイズ ガイド: 結論
にこだわる square 画像は、e コマースの写真がトリミングされていないことを確認する XNUMX つの方法です。 ただし、このルールが常に正しいとは限らないことに気付くかもしれません。 Shopify テーマ.
したがって、製品、コレクション、およびバナーの複数の画像サイズをアップロードして、テーマが最適に処理できるものを理解することをお勧めします。 他のwise、2046×2046ピクセルの標準が気に入っています。 ただし、バナー、ロゴ、スライドショーについては、この記事で前述したより具体的なサイズを使用することをお勧めします。
説明が必要な場合は、以下のコメントでお知らせください。 Shopify 画像サイズ！
コメント 0応答