「写真は大きく、軽く」商品画像の最適化のコツ

tokyo_light03

商品画像は可能な限り大きく、高解像度のものを用意します。
ここでは、配置やライティングといった撮影技術そのものではなく、画像データをどのように作成するとよいかをご紹介します。

画像補正やリサイズ作業

デジカメで撮影したJPEGをそのままWelcartにアップロードする…なんて人はあまりないと思いますが、やはり

  • 画像処理ソフトで色調補正
  • サイト全体で決めた縦横比でトリミング
  • アンシャープマスク
  • Web用の軽量なサイズに保存

ここまではかならず必要になると思います。
商品をより良く見せるための画像補正はもちろんですが、必要な画像サイズをしっかりと把握し、それより大きすぎることも小さすぎることもないようにしなければなりません。

画像は必要とされる最大サイズで

Welthemesのminimumの場合、PC用に最大化したレイアウトでの商品画像の幅は750pxです。その他すべての場所、レスポンシブサイズでこれより大きく表示することはありませんので、750pxの商品画像を生成しWordPressにアップロードするのがもっとも効率的なデータサイズとなります。

仮に1200pxの画像をアップロードし続けたとしても、使わないままサーバ上に溜まっていくだけなので無駄となってしまいます。

サムネイルサイズの設定

WordPressでは自動的に複数サイズのサムネイルを生成してくれます。そのサイズは管理画面から設定できます。Welthemesではほとんどの場面でサムネイルサイズをその場で指定し、管理画面での設定に依存しないようにしていますが、自動生成されるサイズが無駄にならないようにチェックすることも大切です。

もし、「もう大量に画像登録してしまった。サイズを変えたいけどいまから全部アップデートし直すのは無理」という場合、「Regenerate Thumbnails」プラグインが便利です。
http://wordpress.org/plugins/regenerate-thumbnails/

過去にアップロードした画像をすべて、最新の画像サイズ設定でリサイズ・再生成してくれます。

画像サイズを更に小さく

画像圧縮ソフトを使うことで、画質を維持しながら更にサイズを小さくすることができます。

デスクトップアプリケーションでは「JPEGmini」がお勧めです
http://www.jpegmini.com/

またWordPressプラグインでは「WP Smush.it」などがあります。
http://wordpress.org/plugins/wp-smushit/

商品画像が大きいのはいいが、商品画面を開くたびに何秒も待たされるのは、ストレスになってしまいます。
画面のロードが早すぎて困ることはありませんので、あらゆるポイントで少しづつ工夫できる所を見つけて行きましょう。