画像のRetinaディスプレイ対応

Retina等の高解像度ディスプレイを持つスマートフォンで画像がぼやける原因を説明すると共に、綺麗に表示させる方法を説明しています。

高解像度ディスプレイを使った画像表示

 iPhoneではRetinaディスプレイが使われているため、小さなディスプレイでも高解像度です。又、Androidでも高解像度ディスプレイが多く採用されています。

 小さなディスプレイで高解像度だと文字等が非常に小さくなるため、ページ幅を360px等で認識していて、ディスプレイの解像度に合わせて拡大表示される事は「簡単!スマートフォン対応」の「viewport」で説明しました。

 このため、画像も自動的に拡大されます。

 以下はiPhoneのスクリーンショットです。左の「あ」の文字は16px相当の文字を画像ファイルとして保存し、それを<img>タグを使って表示しています。

本来の文字と拡大された文字の表示の違い

 右の「あ」の文字はRetina等、高解像度ディスプレイ対応した画像ファイルを表示しています。右の文字と比較すると、左の文字がぼやけているのが分かると思います。

ぼやける原因

 以下の図を使ってぼやける原因を説明します。9px×9pxの画像ですが、拡大すると1px毎に白黒の格子になっています。

9px×9pxの図

 これを高解像度ディスプレイのスマートフォンで表示すると以下のように表示されます。

9px×9pxの図をスマートフォンで表示

 スマートフォンで表示された画面をスクリーンショットで撮影、画像を拡大し、分かり易いように1px毎に区切り線を付けると以下になります。

9px×9pxの図をスマートフォンで表示して拡大

 つまり、9px×9pxが27px×27pxに拡大され、白黒だった格子は灰色等で埋め合わせられています。これが、ぼやける原因です。

 この灰色等で埋め合わせられる処理はアンチエイリアスと呼ばれ、単純に拡大した時のジャギーと呼ばれるギザギザを目立たなくさせるために行われます。

アンチエイリアス処理

 今回は9pxが27pxと縦横3倍に拡大された例ですが、この比率は機種によって1.5倍や2倍等様々です。

対策

 縦横3倍で表示される場合、9px×9pxの画像は最後には27px×27pxで表示されるため、最初から27px×27pxの画像を使い、CSSでは9px×9pxで指定します。

 使う画像は以下です。

27px×27pxの図

 先ほどは1px×1px毎でしたが、上の図では3px×3pxを1マスにして白黒の格子にしています。

27px×27pxの図を拡大

 これを以下のように<img>タグで指定します。画像自体は27px×27pxですが、styleで9px×9pxに指定しています。

【スマホ対応のimgタグでのCSS指定】
< src="画像ファイル" alt="" style="width:9px;height:9px;">

 これをスマートフォンで表示すると以下のように表示されます。

27px×27pxの図をAndroidで表示

 同様にスクリーンショットで撮影して画像を拡大し、分かり易いように1px毎に区切り線を付けると以下になります。

27px×27pxの図をスマートフォンで表示して拡大

 灰色等で埋め合わせられるのではなく、元々の画像で表示されているのが確認出来ます。

 上記はAndroidの画面でしたが、iPhoneでは以下のように表示されます。

27px×27pxの図をiPhoneで表示

 同様に画像を拡大し、分かり易いように1px毎に区切り線を付けると以下になります。

27px×27pxの図をiPhoneで表示して拡大

 Androidの時より解像度の低いiPhoneを利用したため、元の画像が27px×27pxだったのが18px×18pxになっていますが、Androidの時と同じで灰色等で埋め合わせられていません。

 つまり、スマートフォン向けに2倍、3倍等の大きな画像を作成し、縮小すれば高解像度ディスプレイでは綺麗に表示する事が出来ます。

比較

 16pxサイズの文字を以下の4通りの方法で表示させた時の違いです。

  • 16pxそのままの画像を使って表示
  • 画像編集ソフトウェア等でアンチエイリアスを使わずに3倍に拡大した画像を1/3のサイズ指定して表示
  • 画像編集ソフトウェア等で拡大時にアンリエイリアスを利用
  • 48px(縦横3倍のサイズ)のフォントサイズで作成した画像を1/3のサイズ指定して表示

 上記を上から順に表示したのが以下です。

画像の鮮明さの違い(拡大)

 これをスマートフォンで見える位の大きさにすると以下になります。

画像の鮮明さの違い(縮小)

 やはり、最初から画像を大きく作った方が、スマートフォンで見た時に綺麗に見えます。

 写真等でも最初から320px等に縮小して使うのではなく、1080px等の大きな画像を使ってautoで幅を指定して縮小した方が綺麗に表示されます。

小さい画像と大きな画像の綺麗さの違い

 但し、写真が多いとデータ量が多くなり、表示されるまで時間がかかります。

 このため、綺麗さを重視するのか、表示される速さを重視するのかで使い分ける必要があります。

画像の拡大

 最初から大きな画像で作成していたり、写真の場合は縮小して表示させればいいのですが、320px×320px等で作成した画像の場合は一旦拡大する必要があります。

 png、gif、jpegファイルを画像編集ソフトウェア等でそのまま拡大してもジャギーが目立つか、アンチエイリアスをかけて拡大してもぼやけてしまいます。

 エクセルやパワーポイント等で画像を作成していた場合、簡単に拡大する方法があります。以下の幅320pxの図を例に説明します。

ネットワーク図

 エクセルやパワーポイント等では画像をグループ化して全体を300%等に拡大出来ます。

 単純に拡大しただけでは文字が小さく線も細いため、フォントも3倍、線の太さも3倍に指定し直します。上記の図であれば数分程度で出来ます。

 その画像を保存してCSSでmax-width:auto;で表示します。

 以下で上は拡大しない画像、下は上記方法で拡大した画像をスマートフォンで表示した時のものです。

ネットワーク図

 下の画像の方が鮮明に表示されています。

 このため、手間をかけても綺麗に見せたい場合はお奨めです。

srcset

 単純にサイズを指定して縮小すると、毎回データ量の多い画像を読み込みます。

 <img>タグのsrcsetを使うと、解像度の高さに応じて読み込む画像を変える事が出来ます。

【imgでのsrcset指定】
<img src="320px画像ファイル" alt="" srcset="640px画像ファイル 2x, 960px画像ファイル 3x">

 上記では、通常は「320px画像ファイル」が読み込まれ、2倍以上に拡大される機種では「640px画像ファイル」、3倍以上に拡大される機種では「960px画像ファイル」が読み込まれます。

 これにより、解像度の高いディスプレイ程綺麗な画像、解像度の低いディスプレイでは少ないデータ量で早く表示出来ます。

 2xだけ記述しても大丈夫で、1.5x等もっと細かく分ける事も出来ます。

 デメリットとしては、複数の画像ファイルを準備する必要があり、手間がかかる事です。

サイト関連1

ホームページ作成「簡単!スマートフォン対応
ホームページ作成「画像のスマートフォン対応
ホームページ作成「表のスマートフォン対応
ホームページ作成「動画のスマートフォン対応
ホームページ作成「タップターゲットのサイズ調整
ホームページ作成「スマホとパソコンで表示を変える
ホームページ作成「スマートフォン対応後の確認
  • このエントリーをはてなブックマークに追加