画像をRetina対応しつつ容量を抑える方法

Retina対応しつつ容量を抑える

先日から、ごりゅご.comとごりゅごはんにアップする写真を、RetinaディスプレイのMacにも対応する、高解像度のものにしました。

Retina画像とかってサイズがさすがにデカくて、なんていうかスマホはともかくパソコンとかそれはツライでしょう、って思ってたんですが、なんていうか「裏技」とも言えるようなテクニックがあるんです。

ちょっと前に知ったこのテクニック、ホントに「大したことない」のにめちゃくちゃ凄いんで、ちょっとご紹介したいと思います。

2倍解像度で低い画質の画像を使う

この「レティナ対応しつつ画像容量を抑える方法」は、至ってシンプル。

やることは「2倍の解像度の写真を用意して」「画質3とかの低画質で書き出す」だけ。

横幅320px 画質100 サイズ57kB(width=320px で指定)
320px 画質100

横幅640px 画質30 サイズ36kB(width=320px で指定)
140630 アイキャッチ 640px 30

これ、パソコンで見ると「ほぼ同じ」なんだけど、iPhoneだと下の画像がだいーぶくっきりと見えるかと思います。
(文字とか、右側の写真とか)

PCの場合だと、下記サイトのサンプルがよりわかりやすいかも
画質とファイルサイズ

「倍の解像度の写真を」「低画質で書き出す」だけで、レティナディスプレイでも普通のディスプレイでもどちらでもけっこうキレイな写真を表示できる。

これ、2012年くらいに一時「Retina革命」として話題になったみたいなんですが、最近まで全く知りませんでした…

Retina対応やレスポンシブ対応は奥深いです

元々、Retinaディスプレイに対応するHTMLタグの書き方として、たとえば横幅320px(実際は640pxある)のiPhoneなどの場合には、横幅が640pxの画像をアップロードしておいて、imgタグの中には「width=320px」って書いておくのが、現状の一番シンプルなRetina対応の方法でした。

とは言え、知識としては知ってても、なんかブログでそれ(2倍解像度で、1/2サイズを指定)やるのとか面倒で、結局放置になってたんですよね。

ただまぁ、自分でRetinaMacを使うとやっぱりそこはすごーく気になるわけで。なんか色々と工夫してみたら、なんとなーく自分のブログを書く環境にも「わりと楽な方法」を作り上げることが出来ました。

これについては後ほど「まぁまぁラクにRetina画像を上げる方法」とかって感じでまとめてみたいと思います。

とりあえず、この画質サンプルを載せてくれているサイトは、レティナ対応だとかレスポンシブ対応だとかに対応するいろーんな方法を載っけてくれているので、その辺に興味ある人ならば見て損は無いかと思います。

レスポンシブ画像のデモ

この記事を書いた人

五藤隆介(goryugo)

「仕事効率化」「ライフログ」「家族Hack」「デジタル情報共有」みたいなことを書いてます。

面白い本について語るPodcast「ブックカタリスト」も始めました

iPad Workers

月額15ドル/年額120ドルで月1回のiPadオンラインセミナー
受講&iPad活用のヒントになる情報をお届けします。iPad Meetup(Zoom座談会)も開催します。
ライスワークやライフワークにiPadを活用したい人におすすめのコミュニティです。