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を貼り替えるといった使い方もできます。
今回紹介した画像サイズと対応するアルファベットを全て覚えることは困難です。
必要な時にすぐ確認できるよう、メモやブックマーク等しておくことをおすすめします。
それでは今回はこのへんで。
コメント