Retinaに対応したブログ投稿画像のアップ術を考えてみました【WordPress】

先日、ようやく家電量販店でRetina MacBook Proを触ってきました。予想通りRetinaクオリティに感動すると同時に、自分のブログの投稿画像を見て閉口してしまった。「汚い・・・。」

何となく分かっていたことではありますが、Retina対応へ重い腰を上げるときが来ました。

いくらRetinaディスプレイのような高解像度モニターを使っても、webの画像がそれに対応するサイズでないと意味が無い。

Retinaがスタンダードになる時代が遅かれ早かれやってくるようなので、とりあえずWordPressの投稿画像だけでもRetinaで鑑賞するに耐えうるものにしようと、長い時間をかけて試行錯誤。（素人なので・・・）

やっと一つの答えが見つかったので、ここにメモしておきます。

Retina化するにあたっては以下の条件のもと行いました。

1.一枚あたりのファイルサイズは従来通りの200KB前後とする。（サイトを重くしたくない。）

2.プラグインやJavascriptは使わない。（というか使えないので、HTMLとCSSだけで。）

以上の条件をもとに投稿画像をRetinaに耐えうるものにしてみました、手順は以下の通りです。

1.ブログの投稿画像表示サイズの幅2倍の画像ファイルをアップロード。

　
　私は画像のリサイズに縮小専用AIRを使っています。
　当ブログの画像表示サイズは最大幅588pxなので、２倍の幅1176pxになるようにリサイズ。その際、Jpeg量子化率を80%に設定して、ファイルサイズが小さくなるようにします。
　もしくはファイルサイズを指定すれば、それに応じて量子化率が決定されます。←これ、結構便利ですよね。
　それをアップロード。

2.CSSで表示サイズを指定。

[css]img {
max-width: 100%;
width: auto; /* for IE8 */
height: auto;
}[/css]

これでレスポンシブデザイン対応のブログでも非対応のブログでも画像がきちんと収まって表示されるはずです。

3.functions.phpにeditor_max_image_sizeというフィルタフックを記述。

幅588に指定する場合。
[php]
function filter_editor_max_image_size() {
return array(588, 588);
}
add_filter(‘editor_max_image_size’, ‘filter_editor_max_image_size’);
[/php]

こうすることで、実際には588pxより大きいサイズの画像も”width=588″という属性が付きます。(heightは比率に合わせて決定されます）
widthが実際のサイズのままだと、フィードに表示される画像もバカでかくなってしまったので。

これで、Retinaでもキレイに表示される画像が挿入できます。

実際に画像を見てみましょう。

①従来のサイズ （幅588pxで量子化率96%）ファイルサイズ：172KB

②２倍サイズ （幅1176pxで量子化率80％）ファイルサイズ：216KB

③　②の量子化率96%版 ファイルサイズ：589KB

④幅1680pxで量子化率80％に圧縮 ファイルサイズ：440KB

⑤幅800pxで量子化率80％に圧縮 ファイルサイズ：111KB

①　等倍サイズはRetinaだと粗さが目立ちます。
②　キレイ。そして①と比べてファイルサイズもそこまで変わらない。量子化率80％でも問題なさそうです。
③　②の量子化率を上げたものですが、②と比べてじっくり見ないと見分けが付きません。ファイルサイズも大きいのでこれは却下。
④　2倍以上になるとあまり変わらないような気がします。
⑤　2倍未満だとやっぱり少し粗さが目立っています。

あくまで素人の試行錯誤の結果で、もっとスマートな方法があるかもしれませんが、何かの参考になれば幸いです！

さて、ロゴも変えていこう・・・。