Yahooショッピングの商品画像サイズまとめ

Yahooショッピングの商品画像サイズまとめ

Yahooショッピングの商品画像はURL内の文字を入れ替えることでサイズを変更することができます。 

例えば下のURL、

https://item-shopping.c.yimg.jp/i/■/organic_oca4934

■部分に小文字のアルファベットを入れ込むことで画像のサイズが変化します。

Yahooショッピングの商品画像サイズ一覧

下の表に商品画像のサイズと、それに対応するアルファベットをまとめました。

※各画像サイズのテキストをクリックすると、クリックしたサイズの商品画像が表示されますので確認にどうぞ。

 

商品画像のサイズと対応するアルファベット
サイズ アルファベット
106×106 d
120×120 p
132×132 e
146×146 g
170×170 q
200×200 i
250×250 o
300×300 j
400×400 k
600×600 l
900×900 n
元画像のサイズ f

例)https://item-shopping.c.yimg.jp/i/k/tamachanshop_1418068

この場合、「k」を入力しているので画像サイズは「400×400」です。

※元画像のサイズが400×400に満たない場合、例えば360×360ですと、「k」を入力してもサイズは360×360までしか大きくなりません。

Yahooショッピングの画像サイズをURLで指定する利点

サイズだけならCSSやwidth、height属性で指定可能です。

しかし、URLで商品画像のサイズを指定すると画像、ひいてはページ自体の読み込みが早くなります。

下の表は前述したhttps://item-shopping.c.yimg.jp/i/■/organic_oca4934

のサイズと、その容量についてまとめた表です。

 

商品画像のサイズと容量
サイズ 容量
106×106 6KB
120×120 8KB
132×132 10KB
146×146 11KB
170×170 14KB
200×200 17KB
250×250 18KB
300×300 34KB
400×400 52KB
600×600 99KB
900×900 185KB

サイズと容量の表をご覧いただいてわかるように、小さい画像と大きい画像では容量に大きな差があります。

例えば、商品画像の元サイズが1000×1000にも関わらず、実際の表示サイズが100×100の場合、無駄に大きい画像を読み込んでいることになります。

これを実際の表示サイズと同じか、少し大きいサイズの画像にすると読み込みが早くなります。

画像の数が多い時は積極的にURLでサイズを指定することをおすすめします。

他には画面の解像度が異なるスマホとパソコンでURLを貼り替えるといった使い方もできます。

 

今回紹介した画像サイズと対応するアルファベットを全て覚えることは困難です。

必要な時にすぐ確認できるよう、メモやブックマーク等しておくことをおすすめします。

それでは今回はこのへんで。