楽天の画像をサムネイル表示する仕組み利用して表示最適化や画像管理を楽にしよう

公開日: 

この記事のタイトルとURLをコピーする

楽天のサムネイル表示の画像URLについて
楽天での画像ファイルの管理はRMS内のR-cabinetや楽天GOLDに画像をアップロードして利用しますが、画像をサムネイル表示をすることができる仕組みについてご存知でしょうか?

うまく活用すれば、ショップに来るお客さんが表示する画像の最適化やショップ運営していく中での画像管理も楽になるので、ぜひとも活用していただきたい内容です。

スポンサードリンク

楽天(R-cabinet・GOLD)での画像サムネイル表示の仕組みの活用について

楽天に限ったことではありませんが、ネットショップの運営には大量の画像を扱う必要がでてきます。商品数が少なければ、管理する画像も少ないかもしれませんが、扱う画像は商品画像だけではありません。バナー素材やショップのデザインの装飾素材などいろいろな種類、用途の画像を扱う必要があります。

楽天での画像管理にはR-Cabinet、楽天GOLDを利用していきますが、以前紹介した楽天向けの下記ソフトなど使えばキャビネット、GOLDの両方に対して1つのソフトから管理可能です。また、商品一括CSVなどもアップロードできるので便利ですね。

楽天のR-Cabinet・GOLDのファイル管理には無料で使える「Ribrary」
楽天の運営に欠かせないのが、R-Cabinet、楽天GOLDなどの専用のストレージを使ってのファイル管理がありますが、R-Cabinetは使い勝手...

他のFTPソフトや上記ソフトを使えば画像のアップロード、ダウンロードといった入れ替え作業などは楽になります。

本日はアップロードした後に画像をページなどに表示して利用する際に用意されている便利な仕組みについて紹介します。

RMSのR-cabinet(キャビネット)の画像のサムネイル表示

商品画像はキャビネットに登録している方が多いのではないでしょうか。

キャビネット内に設置した画像を表示するURL

http://image.rakuten.co.jp/店舗ID/cabinet/image/test.jpg

キャビネット内に設置した画像をサムネイル表示するURL

http://thumbnail.image.rakuten.co.jp/@0_mall/店舗ID/cabinet/image/test.jpg?_ex=112×112

※上記のURLはキャビネット直下に「image」フォルダを作成して、その配下に画像(test.jpg)がある状態です。

楽天GOLDの画像のサムネイル表示

次に楽天GOLDに画像ファイルをアップロードしている場合について見ていきます。商品画像はキャビネットを利用することが多いので、ショップ内検索、商品ページの画像からURLをコピーして利用している人もいると思いますので、キャビネットの画像をサムネイル表示するURLは活用している方も多いのではないでしょうか。

GOLDについてはどうでしょう。サムネイル表示の仕組みを知らなければ中々見る機会が少ないURLですね。

GOLD内に設置した画像を表示するURL

http://www.rakuten.ne.jp/gold/店舗ID/image/test.jpg

GOLD内の同じ画像をサムネイル表示するURL

http://thumbnail.image.rakuten.co.jp/@0_gold/店舗ID/image/test.jpg?_ex=200×200

GOLD内にアップロードした同じ画像でも表示する際にサムネイル表示をすることが可能です。※上記のURLはGOLD直下に「image」フォルダを作成して、その配下に画像(test.jpg)がある状態です。


楽天市場でサムネイル表示するURLについて見てみましょう

thumbnail.image.rakuten.co.jpについては、キャビネット、GOLDの画像どちらも共通しています。

キャビネットとGOLDで違う箇所が下記になります。

 キャビネットの場合
@0_mall/店舗ID/cabinet/

 楽天GOLDのの場合
@0_gold/店舗ID/


最後の画像ファイル名の後ろに「?_ex=112×112」や「?_ex=200×200」は横x縦のサイズを指定します。数値の間にあるxはエックスです。数値部分を変更することで表示したいサイズで画像が表示されます。

※楽天のサムネイル表示は横幅が優先されるので長方形の画像の場合は横幅にあわせて元の画像の比率のまま縮小されます。

上記のURLを手入力するのは面倒ですので、商品画像をサムネイル表示するのであれば、ショップ内検索、商品ページで表示されている商品画像の上でマウス右クリックすると画像URLをコピーできるメニューがあるので、コピペしてから「ex=数値x数値」を変更するのが簡単だと思います。

サムネイル表示のURLはどこで使われてる?どんな時に使うのか?

商品画像はキレイに作成した方がクリックされやすいということもあり、各ショップ商品画像やバナーなどは高解像度で作成していることが多いですが、登録した商品画像は検索結果ページ、商品ページ、レビューページなど楽天上の様々なページで表示されますが、表示する縦横のサイズは場所によって様々です。

商品画像として登録されているファイル容量も多い画像をそのまま使っていたらページを表示するのが重たくなってしまいます。サーバーにも表示する端末にも負荷がかかり良いことはありません。

そこで、サムネイル表示の仕組みが使われています。実際に楽天市場で表示されている商品画像のURLを見てみます。

楽天市場内でサムネイルで画像が表示されている
楽天市場の商品検索の結果はもちろん、楽天ランキングのページ、ショップ内検索結果ページ、商品レビューページなど楽天市場のシステムが出力しているページに表示される商品画像のURLを確認してみると、上記で紹介したサムネイル表示のURLが使われています。

見た目だけを気にするのであれば、


<img width="120px" src="http://www.rakuten.ne.jp/gold/店舗ID/test.jpg">

といった画像の縦横の表示サイズを指定すれば良いかもしれません。

サムネイル表示をする記述


<img src="http://thumbnail.image.rakuten.co.jp/@0_gold/店舗ID/image/test.jpg?_ex=120x120">

上の2つの記述はブラウザで表示した場合は、見た感じではまったく変わりはありません。

同じ画像に見えるが・・・
しかし、width=”120px”と記述した方ではお客の端末(PC、スマホ、タブレット等)には見た目は小さくなっていますが、登録した画像そのままの画像がダウンロードされてしまいます。あくまで、見た目のサイズ横幅を120pxとしているだけなのです。高速回線を利用できる環境であれば、気にならないかもしれませんが回線速度が遅い場合などはページを表示するのにも時間がかかってしまいページからの離脱の要因にもなります。スマホなどデータ通信容量が気になる環境の人にとってはページを表示するだけで想定外の通信容量が発生してしまいます。

同じ画像に見えるが・・・ファイルサイズが違ってくる

同じ画像でもサイズ違いの画像を作成していませんか?

ヘッダー等に表示する画像スライダー用のバナー画像は、大きく綺麗に表示したいので高解像度で作成したとします。同じ画像をスマホページのバナーとしても設定する場合、さきほどの話のように表示速度、データ通信容量が気になるのでスマホ用に解像度を落としてファイル容量を小さくしたファイルを作成するという方法もあります。

同じ画像をサイズ違いで作成する
例)
・baner1000.jpg 1000px☓667px ファイル容量:98KB
・baner600.jpg 600px☓400px ファイル容量:45KB
・baner300.jpg 300px☓200px ファイル容量:16KB

ただし、画像ファイルの数が増えてしまうので管理が非常に手間になってしまいます。また、画像の修正をする際には、各サイズごとのファイルを修正する必要がでてきますので考えただけでも面倒ですね。

そこで、サムネイル表示の仕組みを利用すれば面倒なファイル管理が解決できてしまいます。作成する画像は利用する一番大きいサイズに合わせて1つ作成するだけで済みます。PC用のトップページで利用する際はサムネイル表示を使わず画像の元サイズそのまま表示して、レフトナビ、スマホページで同じ画像を使いたいときにはサムネイル表示の仕組みを利用すれば、修正などする際も1つの画像を修正するだけでファイル管理も楽になりますし、ページの表示速度、データ通信容量も軽くすることが出来るのです。

実際にサムネイル表示した場合の画像のファイル容量についても確認してみましたが、画像編集ソフトにて別サイズとして作成したファイルと同じようにファイル容量が軽くなっていました。

せっかく便利な仕組みが用意されているので知らなかったという方はぜひ、活用してみてください。

そもそも元画像のファイルサイズの最適は出来ていますか?
画像圧縮サービスなどを活用すれば、登録する画像のファイル容量を小さくするすることが可能です。

画像のファイルサイズ・容量を軽量化してくれるWebサービスについて
ネットショップ運営に画像ファイルの扱いはかかせません。商品がより綺麗に見栄えよく見えるように高解像度の画像を使えば綺麗に表示...

スポンサードリンク
FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

ヒートマップ分析も出来る無料のアクセス解析

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

ネットショップ運営「おすすめ書籍」


紙媒体より電子書籍(Kindle版)の方がお得です
>>>ネットショップ運営 おすすめ書籍[Kindle版]

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑