1枚の写真に、2つの役割。
商品一覧の小さな画像は、椅子の形と色を伝えます。接写では、生地の織り目や縫い目まで見える必要があります。両方に同じ大きなファイルを使えば通信量が増え、両方を小さくすれば必要な細部が失われます。
一覧と商品ページそれぞれに適したサイズを用意し、実際の拡大機能には大きめの元画像を残します。お客様が見るサイズで各画像を確認してください。サムネイルでは問題のない圧縮でも、接写では生地がぼやける場合があります。
ファイル、サイズ、読み込む順番を見直す。
まず、表示の遅いページを1つスマートフォンで開きます。最初に必要な画像を特定し、次の3点を確認します。
仕上がりを見て形式を選ぶ
同じ表示サイズで候補の形式を比較します。お客様が使うブラウザーで輪郭、質感、色が保たれている場合に、小さいファイルを選びます。
適切なサイズをブラウザーに渡す
幅400 CSSピクセルで表示する画像でも、2倍の画素密度の画面では幅800ピクセルのファイルが必要になる場合があります。複数の画像候補と正しい表示サイズを指定し、ブラウザーが選べるようにします。レスポンシブ画像の選択の仕組み。
重要な画像を先に読み込む
ページを開いてすぐ見えるメイン画像は速やかに読み込みます。下方の画像は後に回し、表示スペースを確保して、価格やボタンが画像の出現時に動かないようにします。画像読み込みのガイド。
ファイルが小さくなっただけでは、確認は終わりません。
変更前後で、同じページ、同じ表示幅、同じテスト条件を比較します。メディアライブラリーのファイルだけでなく、お客様に届く内容を確認します。
何がダウンロードされたか
実際に読み込まれた画像ファイルとバイト数を記録します。ページが古い元画像を配信したままなら、ファイルを最適化しても効果はありません。
どの細部が残っているか
同じ切り抜き範囲を同じサイズで比べます。椅子なら、生地、縫い目、色を一覧、全体表示、拡大表示でそれぞれ確認します。
読み込み中に何が起きるか
メイン画像が現れるタイミングと、価格や購入ボタンが動くかを確認します。同じ条件で繰り返してから、改善を判断します。
大きなファイルを送るだけなら、Devenia Sendをご利用ください。
細部をしっかり、待ち時間を短く。
表示の遅いページ、問題が起きる端末、お客様に見せたい細部をお送りください。最初の画像、ギャラリー、拡大表示のどこに問題があるかもお知らせください。