ストアのShopify画像サイズを最適化するための究極のガイド
公開: 2022-06-24あなたの店がオンラインになるとき、あなたがあなたの店がスムーズにそして効率的に運営されることを保証するためにあなたが考慮しなければならない多くの要因があります。 特に顧客がオンラインで買い物に行く場合、彼らはあなたが直接販売している製品を見て、商品の品質を管理することができません。 したがって、彼らはあなたの製品を購入することを決定するときに躊躇する可能性があります。 言い換えれば、オンラインショップの画像が高品質であり、購入者が購入したくなるような商品の多くの側面を示していることを確認する必要があります。 次に、Shopifyストアの所有者であれば、この記事は間違いなくあなたにぴったりです。 Shopifyストアの商品画像サイズを最適化するための究極のガイドを提供します。
まず、Shopifyストアで画像サイズが重要なのはなぜか疑問に思われるかもしれません。
ユーザーエクスペリエンスの向上:写真がぼやけたり、伸びたりせずにすべてのデバイスで表示されるように作成されている場合、オンラインの購入者は、物事をより適切にイメージし、仕様を理解し、仮想のルックアンドフィールを得ることができます。 これにより、全体的なショッピング体験が向上します。
ページの読み込み速度を上げる:画像サイズを最適化することで、Webページが不必要に大きくなることはありません。 1ページにいくつの画像があるかは関係ありません。 その結果、Webサイトは3秒未満で読み込まれます。これは、消費者が許容できる最短の時間です。 ウェブサイトをより早く改善する必要がある場合は、他のShopifyショップのパフォーマンス最適化アドバイスを調査して実装することをお勧めします。
他のSEOの取り組みを強化する:写真を最適化すると、ページの読み込み速度が向上し、すべてのSEOアクティビティに役立ちます。 それはあなたのウェブサイトが彼らが探している情報を持っていることを検索エンジンに知らせ、それはあなたのランキングを上げます。
次に、Shopifyの一般的な画像サイズをいくつか紹介します
Shopify製品の画像サイズ:2048 x2048pxまたは800x800px
アップロードできるのは、最大4472 x 4472ピクセル、サイズが20MBのShopify製品の写真のみであることに注意してください。 ただし、ほとんどの場合、これはやり過ぎです。 このような大きなグラフィックはストアには不要であり、ページの読み込み時間が遅くなります。 代わりに、2048 x 2048ピクセルは、Shopifyが正方形の製品写真に対してアドバイスするものです。 優れた品質と迅速なサイト読み込みの素晴らしいバランスを実現するには、JPGまたはPNG形式を利用してください。 製品の写真は通常、800x800ピクセル以上である必要があります。 そうしないと、ズームインなどの機能がうまく機能しない可能性があります。
Shopifyコレクションの画像サイズ:2048 x 2048 px
Shopifyコレクションの写真に関連する場合、必要なサイズはありません。 ただし、最大4472 x 4472ピクセル、または20メガピクセルの任意のサイズにすることができます。 Shopifyは通常、高解像度の正方形の写真を目的として、画像を2048×2048ピクセルに制限することをお勧めします。
サイズを超えて、写真のコレクションの寸法はすべて互いに一致している必要があります。 一方、幅に対する高さの比率は一定でなければなりません。 そうしないと、コレクションページのインターフェイスが台無しになります。
Shopifyスライドショーの画像サイズ:幅1200〜2000ピクセル、高さ400〜600ピクセル
推奨されるShopifyスライドショー画像の比率は、高さが400〜600ピクセル、幅が1200〜2000ピクセルです。
モバイル/小画面ビューに移動すると、縮小とトリミングが行われます。 その結果、Shopifyのスライドショー設定で写真を中央に配置します。 その結果、画像の上部、下部、左右の部分が切り取られ、全体的な外観が向上します。
Shopifyヘッダー画像のサイズ:高さは120ピクセル以下
状況によっては、ヘッダーブロックに写真を含めることができます。 これは、今後の機会のための補足ロゴまたは広告として役立つ可能性があります。 Shopifyテーマでは、ヘッダーブロックの最大高さは250ピクセルです。 ただし、最大高さが120ピクセルの写真を使用することをお勧めします。
Shopifyバナーサイズ:1200 x 400〜600ピクセル
Shopifyのバナーサイズを決定する際には、特定のテーマの要件を考慮する必要があります。 たとえば、ブルックリンテーマの場合、1200×800ピクセルの写真を利用できます。
Shopifyのロゴサイズ:450 x 250px
最大のShopifyロゴは450x250ピクセルです。 サイドバーの幅250pxがこれの原因です。 その制限内にとどまることが重要ですが、ロゴは幅450ピクセル、高さ205ピクセルである必要はありません。
次に、人気のあるShopify画像フォーマットを提案します
eコマース写真で人気のある最も人気のある画像フォームのいくつかを見てみましょう。 それぞれの長所と短所を通知する必要があります。
JPG / Jpeg
Shopifyストアで最も使用されている画像ファイル形式は間違いなくJPGです。 優れたカラースペクトルと小さなファイルサイズを備えているため、読み込みが速くなります。 JPGの圧縮能力は、品質とサイズの間の素晴らしい妥協点を提供します。 この場合、Shopifyは、小売業者が製品ページの写真にJPGを使用することを明示的に提案しています。
PNG
PNGは、Shopifyストアで適用されるもう1つの非常に人気のある画像フォームです。 PNGは、全体的な画質を損なうことなく画像ファイルのサイズを縮小できるため、eコマースWebサイトに最適です。 さらに、PNGは透明性をサポートしているため、ストアの外観をより細かく制御できます。 PNGの可逆圧縮は、非常に大きな画像ファイルになることが多いため、課題です。
GIF
短いアニメーションや製品の説明は、広く使用されている画像形式のGIF(Shopifyドロップシッピングストアで非常に人気があります)を使用して作成できます。 GIF画像形式では約250色しか使用できないため、写真は最も鮮やかなものにはなりません。 しかし、他の画像形式と組み合わせると、それらは本当に輝くかもしれません。
TIFF
いくつかのWeb編集ツールは、便利な画像形式TIFFをサポートしています。 これは、マーケティングキャンペーンの画像編集とカスタマイズがデザイナーと小売業者にとって簡単であることを意味します。 TIFFで高品質を利用でき、1つのファイルに多くの写真を保存できます。 ただし、PNGと同様に、可逆圧縮によりファイルサイズが大きくなります。
使用する画像サイズがわからない場合は、通常、JPG/Jpegを選択することをお勧めします。 すでに確立しているように、JPGは、ファイルサイズと画質のバランスをうまくとることができる唯一の画像形式です。
次に、Shopifyストアに含める画像の種類に移動します
商品のみの画像
名前が示すように、これらの画像はあなたの商品の単一の写真です。 商品のみの写真は、お客様が購入を選択する際に役立つさまざまな角度からの「メイン」アイテムを特徴としています。 多くの場合、白または中間色の背景に対して撮影されます。
商品を撮影するときは、各画像の配置の一貫性を保つことが重要です。 また、シームレスなユーザーエクスペリエンスのためのShopifyの理想的な画像サイズ基準も覚えておくことが重要です。
使用中の製品
Shopifyストアで適用する2番目の種類の写真は、単独で、またはメインアイテムを強化する他の商品と組み合わせて使用されている製品です。
これらの種類の画像は、見込み客の製品理解を向上させ、エンゲージメントとコンバージョンを促進します。
グラフィックオーバーレイ付きの写真
より特徴的な外観にするために、少しクリエイティブになり、テキストやその他の画像などのグラフィックオーバーレイを写真に適用できます。 Canvaや同様の代替プログラムの助けを借りて、これを簡単に達成できます。
グラフィックス
Shopifyストアのグラフィックを使用して情報を表示できます。 これは、さまざまなオプション、サイズチャート、またはカラーピッカーの視覚的表現である可能性があります。
最後になりましたが、Shopify製品の画像サイズを最適化する方法
画像に名前を付けます
小売業者の大多数は、デフォルトのカメラの名前を変更することなく、多数の製品写真を急いで調べます。 検索エンジンは、ページ上のテキストをクロールするだけでなく、画像のファイル名を分析してページのコンテンツを判別します。
画像を圧縮する
平均的な顧客は、eコマースサイトが立ち上がるのを3秒以上待つことはありません。 したがって、ページをより速くロードするために必要なすべての手順を実行する必要があります。
遅いページ速度に対処するための最良の戦略の1つは、写真のファイルサイズを小さくすることです。 効率を最大にするために、画像サイズを約70kbに保つことをお勧めします。
幸い、Shopifyはすでに写真のサイズをわずかに縮小しています。 写真のサイズをさらに小さくするために、無料のプログラムTinyIMGおよびCrushPicsを利用することもできます。 これらのツールを使用すると、一度に複数のファイルを一括処理して、圧縮量を管理できます。
オンラインストア全体で一貫したスタイルを使用する
あなたのサイト訪問者にあなたのオンラインショップで均一なショッピング体験を与えるためにあなたの写真を一貫して修正することを忘れないでください。 これは、統一された洗練された外観のために、サイズ、スタイル、背景、そして時には色の配置さえもすべて同じでなければならないことを意味します。
ライフスタイルと製品写真を含める
ほとんどの場合、標準的な製品写真とライフスタイル写真を組み合わせると、コンバージョン率が向上します。 純粋な製品写真は、顧客が製品の特徴を調べることができるようにするために不可欠ですが、ライフスタイル写真は、ユーザーが日常生活の中でオブジェクトを描くことを可能にします。
A/Bテストを使用して最適な画像を見つけます
最後になりましたが、写真のさまざまなバリエーションを試して、どれが最高のパフォーマンスを発揮するかを見つける必要があります。 次のことをテストできます。
- 各ページにある商品画像の数
- 最も効果的な画像の種類
- 各商品コレクションページの数量は(10、20、100)です。
ユーザーが写真をどのように操作しているかを確認するには、hotjarなどのヒートマッピングアプリケーションを利用します。 または、ありがとうページで購入後の簡単な投票を使用して、顧客に好みの画像タイプについて尋ねることもできます。
ガイドラインを確認し、Shopifyの理想的な画像サイズを覚えておいてください
正しい方向に進んでいることを確認するには、Shopifyの画像のサイズと形式がテーマに最適である手順を確認してください。 Shopifyの最高の画像サイズを覚えておいてください。 経験豊富な写真家を雇って商品の写真を撮る場合は、必要なものを事前に知らせることができます。 この方法で時間を大幅に節約できます。
モバイル向けの画像最適化
モバイルユーザーの79%が、過去6か月間にスマートフォンを使用して何かを購入したことをご存知ですか? したがって、2022年以降、写真をモバイルデバイス用に最適化することが重要になります。
Shopifyは、モバイルデバイスや小さな画面デバイスに合わせて画像サイズを自動的に調整することがよくあります。 モバイルデバイス用に写真を変更するには、写真を手動で変更する必要がある場合があります。
モバイルフレンドリーな画像を作成するには、次のヒントを適用してください。
- モバイルデバイスで歪む可能性があるため、過度に大きな画像を使用しないでください。
- 商品を垂直方向と水平方向の両方の中央に配置し、正方形の写真を使用します。
- 写真がモバイルデバイスでより迅速に読み込まれるようにするには、遅延読み込みを利用します。
- 画像を追加するたびに、モバイルデバイスでの画像の表示を確認してください。
ストック画像を使用する
ブログやバナーでは、手頃な価格のストックフォトを利用して自分の文章を説明することもできます。 ただし、ストックフォトは一般的なものである場合があるため、オーバーレイを編集して適用し、ビジネスに適したものにするために、必ず独自のスタンプを付けてください。
結論
トピックを通じて、Shopifyストアで画像を最適化する方法についての完全なガイドを示します。 役立つ提案があれば、画像製品の品質を向上させることができれば幸いです。 消費者が商品の概要を把握できない場合、商品の購入が困難になる可能性があります。 したがって、店舗でのイメージは、より多くの顧客を引き付け、売り上げを伸ばすために重要な役割を果たします。 あなたの店をより魅力的でプロフェッショナルに見せたい場合は、私たちに連絡して、あなたの店を次のレベルで活用できる専門家を雇うことができます。