Apple に倣ってブログに載せる iPhone のスクリーンショットを横幅 240px に

iphone5
photo credit: William Hook via photopin cc

iPhone から自分のブログを見た時に、画像がどうしても粗く表示されることがずっと気がかりでした。特にスクリーンショットはリサイズした画像を使うと粗さが目立ちます。当の Apple のサイトを調べてみると、フルサイズの画像を横幅 240px に縮小して表示していました。今回は Apple に倣ってスクリーンショットを縮小表示させる方法と、画像を軽量化するツールを紹介します。

目次

  1. そもそも iPhone で画像が粗くなる理由
  2. スクリーンショットの解像度
  3. Apple のやり方
  4. 画像を縮小表示させる方法
  5. WordPress の「メディア設定」を見直す
  6. Markee と JPEGmini でオリジナル画像を軽量化
  7. まとめ

1. そもそも iPhone で画像が粗くなる理由

iMac や iPad mini でプレビューした時はきれいに見えていたはずの画像が、iPhone の画面で見るとどうもしっくりこない…。ブログを始めたころから気にはなっていたのですが、記事を書いて更新していくことで精一杯で、なかなか深く考える余裕がありませんでした。

少しずつテーマのカスタマイズにも手をつけるようになり、その勉強の中で「iPhone 向けには表示させたいサイズの2倍の画像を用意する必要がある」という文言をよく目にするようになりました。

iPhone 4 から搭載された Retina ディスプレイで解像度が従来の倍になったため、たとえば 100px x 100px サイズで画像を表示させたい時は、200px x 200px サイズの画像を縮小して表示させなければ、鮮明に見えないということです。

よくよく考えれば iMac も iPad mini も Retina ディスプレイではないので、iPhone とは見え方が違うのも当然でした。

2. スクリーンショットの解像度

iPhone のスクリーンショットの画像サイズは次の通りです(縦幅 x 横幅)。
  • iPhone 4/4s: 960px x 640px
  • iPhone 5: 1136px x 640px

もちろん、このままフルサイズで張り付けると PC で表示した際にあまりにも大きくなってしまいます。

これまでは WordPress の「メディア設定」で「中サイズ: 400px」に指定していたので、アップロード時に生成される 400px x 225px の画像をそのまま同じサイズで張り付けていました。画像サイズと表示サイズが一緒だったので、iPhone から見ると粗く表示されていたのです。

3. Apple のやり方

ブログに載せるスクリーンショットの画像サイズはどれぐらいがよいのか、なかなか考えつかなかったので、本家本元の Apple のサイトを見てみました。別の記事を書く時に参照した以下のページに、ちょうどスクリーンショットが載っていました。

ソースコードを覗いてみると、スクリーンショットの画像サイズは 1136px x 640px のフルサイズ。それを 426px x 240px に縮小して表示させています。

つまり縦横それぞれ、フルサイズの0.375倍の数値です。元がフルサイズの画像ですので、拡大しても鮮明に表示されました。

自分でもスクリーンショットを2枚張り付けてみます。上が Apple に倣ってフルサイズの画像を 426px x 240px に縮小表示させたもの。下があらかじめ 426px x 240px にリサイズした画像を等倍で表示させたものです。iPhone で見ると、下の画像はかなり粗くなっていることが分かると思います。

screen shoot screen shoot

4. 画像を縮小表示させる方法

画像を縮小表示させるには、投稿する記事の中でまずフルサイズの画像を張り付け、それから HTML を修正します(もっと簡単にできる方法もあるのかもしれませんが、自分にはまだ分かりません…)。

WordPress の場合、投稿画面の「メディアを追加」でフルサイズの写真を張り付けてから HTML エディタで確認すると、以下のように書かれているはずです。

<img src="http://xxx/wp-content/uploads/xxx.png" alt="xxx" width="640" height="1136" class="xxx" />

この中で widthheight の値を修正することで、表示サイズを指定します。

<img src="http://xxx/wp-content/uploads/xxx.png" alt="xxx" width="240" height="426" class="xxx" />

5. WordPress の「メディア設定」を見直す

ここまで試してきた結果として、当面、スクリーンショットについては Apple と同じ方法で張り付けようと考えました。「2倍のサイズを用意する」という原則から言えば 852px x 480px にリサイズした画像があれば十分にも思いますが、単純に「フルサイズを縮小する」と考えておいた方が、表示サイズを弄りたくなった時にも柔軟に対応できる気がします。

そうなってくると、WordPressの「メディア設定」であまりいろいろなサイズの画像を生成する必要もなさそうなので、「サムネイルサイズ」の設定だけ残して、あとはサイズの指定を解除しました。

スクリーンショット以外の画像については、サイズの大きいものは長辺 640px にリサイズしてアップロードするようにしています。

6. Markee と JPEGmini でオリジナル画像を軽量化

iPhone 5 のスクリーンショットは 1136px x 640px の高解像度ですから、オリジナル画像を使うに当たってはファイルサイズの大きさが気になります。そこで、サイズを圧縮する方法やツールを探しました。

そして見つかったのがこちらのページ。

今まで iPhone での画像処理には Skitch を使っていましたが、Markee は画像の保存形式を PNG から JPEG に変えてファイルサイズを圧縮できると知り、早速乗り換えることにしました。

ただ、iPhone ではスクリーンショットは PNG 形式で記録されますが、「カメラ」アプリで撮った写真は JPEG 形式で記録されます。設定によっては「位置情報」が画像に埋め込まれてしまうので、ご注意ください。

関連記事:

iPhone では Markee で画像処理を済ませ、JPEG 形式で保存。さらに Mac で JPEGmini を使って圧縮することで、以下のようにファイルサイズを軽くできました。サンプルの画像ファイルは先ほど載せた iPhone 5 のホーム画面のスクリーンショット。フルサイズの方です。

  1. 撮影時: 1.2 MB
  2. Markee でJPEG 形式で保存: 214 KB
  3. JPEGmini で圧縮: 140 KB

スクリーンショット1枚で1 MB を超えていたことも驚きですが、アプリを2つ経由するだけでおよそ1/10にまでサイズを軽くできることもまた驚きでした。

先ほどのスクリーンショットには、最後の140 KB のファイルを使っています。参考までに、鮮明さを比較するために使ったもう一方(426px x 240px にリサイズした画像)のファイルサイズは、同じ方法で圧縮して42 KB でした。

JPEGmini には、圧縮できる画像の枚数が1日20枚に制限されている無料版 JPEGmini Lite もあります。私自身もそうですが、1回の記事で大量に写真を載せる人でなければ無料版でも十分対応できそうです。

もし Mac を使わずに iPhone だけで作業を完結したい場合は、Markee の設定で「画像の保存サイズ」を「75%」にしておくと、スクリーンショット画像を 852px x 480px にリサイズして保存してくれます。表示サイズが 426px x 240px であれば、ちょうど2倍になります。ファイルサイズは142 KB だったので、フルサイズの画像を JPEGmini まで使って圧縮した時とほぼ一緒でした。

ちなみに、Markee でスクリーンショットのステータスバーをトリミングするケースでは画像サイズは 1096px x 640px になります。この場合は縦横にそれぞれ0.375をかけた表示サイズは、411px x 240px になります。

7. まとめ

  1. iPhone の Retina ディスプレイ向けに鮮明な画像を表示させるには、縦横が表示サイズの2倍以上の画像を用意する
  2. Apple はフルサイズの画像を 426px x 240px に縮小して表示させている
  3. フルサイズの画像でも Markee と JPEGmini 経由で JPEG 圧縮をかければ軽量化できる
  4. ステータスバーをトリミングする場合の表示サイズは 411px x 240px

最後に、今回の記事に登場したアプリたちです。

コメントを残す

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