モバイルWeb用に画像を最適化する方法

公開: 2016-02-09

画像のファイルタイプとサイズを選択する際は、特に複数のプラットフォームで販売している場合は、品質、ページの読み込み時間、ズーム機能、マーケットプレイスの要件に注意してください。ユーザーエクスペリエンスを向上させるためにモバイルを念頭に置いて、Web用に画像を最適化する方法とファイルタイプを選択する方法を見てみましょう。

適切な画像サイズの選択

ユーザーがズームインできるように十分な大きさの画像と、スペースを取りすぎてページの読み込み時間が遅くならないように最適なサイズの画像のバランスをとることが重要です。 Shopifyでは、最大20MBのファイルサイズで最大4472x4472ピクセルの画像をアップロードできます。ただし、Webサイトビルダーは通常、正方形の製品写真に2048x2048ピクセルを使用することを推奨しています。これらは高解像度の画像であり、優れたズーム機能を備えたプロフェッショナルでバランスの取れた外観をストアに提供します。ズーム機能を使用するには、画像が800x800ピクセルを超える必要があることに注意してください。

同様に、AmazonとEtsyには、ズームを有効にするための1000x1000ピクセルの画像要件があります。

製品ラインとコレクションページで均一な外観を維持するには、すべての特徴画像の幅と高さのアスペクト比を同じ、たとえば正方形に保つ必要があります。フィーチャー画像は、ホームページ、カートページ、チェックアウトページ、さまざまなコレクションページなど、店舗全体に表示される商品の最初の画像です。洗練された店の外観を伝えるために、すべてのサムネイルも同じサイズと形状に保ちます。顧客の多くはモバイルでも閲覧することになり、正方形の画像は小さな画面に簡単に再配置できることを覚えておいてください。

適切な画像形式の選択

製品写真で最も広く使用されているファイル形式と、それぞれがテーブルにもたらすものを見てみましょう。これらは、製品写真でどの程度一般的に使用されているかによってここにリストされています。

JPG

JPGは、世の中で最も一般的なデジタル画像ファイル形式です。広くサポートされており、ファイルサイズが小さく、色の範囲が広いことを誇っています。その圧縮により、ファイルサイズと画質のバランスをとることができます。 Shopifyは、特にJPGをお勧めします。JPGは、比較的小さいサイズと高品質の画像を配信できるため、製品の写真に適しています。

PNG

PNGは、256色の制限を取り除くことでGIF形式を改善するために作成されました。広く受け入れられており、ロスレス（品質を低下させることなくファイルサイズを縮小）し、透明性（たとえば、透明な背景）をサポートします。欠点は、ロスレス圧縮のためにPNGファイルのサイズが大きくなる可能性があり、形式がJPGほど普遍的に互換性がないことです。

GIF

GIFは、画像を256色に圧縮および縮小することにより、小さなファイルサイズを提供します。 PNGに広く置き換えられましたが、それをサポートし、ブラウザによって広く認識されている唯一の形式であるため、アニメーションに使用されています。

TIFF

TIFFは、さまざまな編集およびWebアプリケーションで広くサポートされている可逆圧縮形式です。高品質の解像度を提供し、複数の画像やページを1つのファイルに簡単に保存できます。ただし、ファイルサイズは大きくなる傾向があります。

BMP

BMPは、Windowsエコシステムで一般的に使用されています。データ圧縮、アルファチャネル（透明な背景の追加など、画像の一部を操作するために使用できる追加情報を保存するためにPhotoshopで使用される）、およびほぼ普遍的な互換性をサポートします。非圧縮で、完璧な画像を提供しますが、ファイルサイズも非常に大きくなる可能性があります。

全体として、小さいサイズとまともな品質を組み合わせる場合、JPGは確かに最も便利です。 PNGは高品質の可逆圧縮を提供しますが、ファイルサイズが大きくなるという大きなコストがかかります。 GIFは、360度のショットを提供していて、軽量のファイルが必要な場合に便利です。比較すると、BMPとTIFFは優れた品質を提供できますが、実物大は通常かなり重く、実用的ではありません。

モバイル向けの画像のサイズ設定

Shopifyは、小さい画面に合わせて画像のサイズを自動的に変更しますが、特定の画像では手動編集が必要になる場合があります。デスクトップ画面とモバイル画面はサイズが異なるだけでなく、向きが逆になっていることに注意してください。 Shopifyは穏やかなトリミングでこれに対応しようとしますが、画像が正方形で、製品が垂直方向と水平方向の中央に配置されていると最適です。

また、Shopifyの最大4000 x 4000ピクセルなど、解像度が高すぎる画像は、モバイル用にサイズ変更するとぼやけて表示される可能性があります。そのため、モバイルを念頭に置いて画像を管理しやすいサイズと形状に縮小すると、すべてのデバイスでストアの見栄えが良くなります。大きなファイルもサイトの読み込み時間を遅くすることに注意してください。また、eコマース、特にモバイルでは、毎秒が重要であるため、画像の最適化を優先する必要があります。

そのため、可逆圧縮を使用すると最高品質の画像が得られますが、アップロードに時間がかかり（特に大量に）大きなファイルが作成されることが多く、ページの読み込み時間が遅くなり、訪問者がストアを放棄する可能性があります。これは、インターネットの速度が遅くなり、画像が最終的に表示されるのを待つことが買い物客を苛立たせるモバイルで特に当てはまります。

Shopifyのレスポンシブデザインとアルゴリズムは、デバイス間で画像のサイズ変更と表示に優れていますが、思いやりのあるファイルサイズを提供することで、よりスムーズなショッピング体験を実現できます。

著者について

Holly Cardewは、eコマースストアが商品の写真を編集および最適化して売り上げを伸ばすのに役立つプラットフォームであるPixcの創設者です。 Pixcは、24時間以内に背景を編集および削除することにより、平均的な製品画像を美しい画像に変換します。 10代の頃からeBayで販売し、独自のオンラインマーケットプレイスを作成してきたホリーは、eコマース、オンラインマーケティング、グラフィックデザイン、分散型チームの構築のバックグラウンドを持っています。彼女はまた、Shopifyストアの構築と運営、および大規模なソーシャルメディアのフォロワーの増加の経験もあります。 2016年、ホリーは30歳未満の小売およびeコマースフォーブス30のリストに含まれました。ホリーは、サンフランシスコ、ブリスベン、シドニーの間で時間を割いています。ホリーが働いていないとき、彼女は旅行、新しい場所の探索、美しいデザイン、タイポグラフィ、そして新しいビジネスアイデアを思いつくのが大好きです。