iPhoneマイスター

iPhoneを中心にアップル製品に関するニュース、噂、レビューなどを中心にお伝えしています。

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

   


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

スポンサードリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

幅588に指定する場合。

function filter_editor_max_image_size() {
  return array(588, 588);
}
add_filter('editor_max_image_size', 'filter_editor_max_image_size');

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

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

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

①従来のサイズ (幅588pxで量子化率96%)ファイルサイズ:172KB

②2倍サイズ (幅1176pxで量子化率80%)ファイルサイズ:216KB

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

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

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

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

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

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

 - りんご雑記 , , ,

Message

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  関連記事

IMG_0239
”黒い工業デザインの箱” ThinkPad L512を買いました <レビュー>

いやいや、MacBookでなく、ThinkPadを買ってしまいました。 仕事の関 …

iPad miniケース・カバー
背面の小さい穴は不要!iPad miniのケース・カバーを買う前には必ず確認しよう

iPad mini、ついに発売されましたね。本日のヨドバシカメラではiPad m …

iPhone 5
iPhone 5は4Sを手放すほど素晴らしいデバイスか

iPhone 5がついに発売されました。ユーザーのレビューも続々とネットにあがっ …

iPhone着信音 マリンバ
着信音はやっぱりマリンバとトライトーン。でも人と同じはイヤ!という人に

iPhoneユーザーのほとんどが着信音はマリンバなのではないでしょうか。マリンバ …

iOS ソフトウェア・アップデート
OTAでのiOSソフトウェア・アップデートには、バッテリー残量が50%以上必要

iOS5.0.1がリリースされましたね。 今回のアップデートより、PC(母艦)を …

iOS 6 地図
iOS 6のマップはここが凄い。オフラインでも使用可能、極端に少ないデータ通信量

アップルの株価をも下げてしまったiOS 6のマップ。「欠陥地図」として世間では評 …

130421-0008
MacユーザーにとってベストなAVCHD(mtsファイル)管理方法を考える【mov変換 or mtsでそのまま保存】

CanonのフルHDビデオカメラ、ivis HF21で撮ったクリップがだんだん増 …

kindle Paperwhite
電子書籍リーダーにはiPad miniでなくKindle Paperwhiteを選ぶ5つの理由

初めての電子書籍リーダー選び。iPad miniが候補にあがっていましたが、やっ …

images
iOS 7のiPhoneを初期費用(本体代含む)2万円以下、月額1,560円で使う方法

割引があってもなんだかんだ毎月7000円ほど維持費がかかるiPhone。しかも2 …

IMG_3235
X-Doria社のiPad miniケースレビュー。Smart Cover対応で小穴もなし!薄い!

ハイクオリティなiPhoneケースやiPadケースをリリースするロサンゼルスにあ …