Retinaディスプレイでサイト/ブログの画像がぼやける!?その対策を教えます

ブログやサイトを運営している方にとっては、避けては通れない「Retinaディスプレイによる画像のぼやけ」

通常のディスプレイではキレイに表示された画像が、Retinaディスプレイから見たら画像がぼやけてた、なんてことありませんか?

今回は「Retinaディスプレイの基礎知識と、サイト/ブログをRetinaに対応させる方法」について解説します。

Retinaディスプレイとは?

通常のディスプレイとRetinaディスプレイで見た時の画像の大きさの比較

Retinaディスプレイは、Appleが開発している、従来のディスプレイの2倍サイズの高解像度で表示される画面のことを指します。Retinaとは、英語で「網膜」を意味します。

Retinaディスプレイで表示される画像は、通常の2倍サイズの大きな画像で表示されているので、通常のディスプレイよりキレイに見ることができます。

プロフィール用アイコン
みきてぃ東西線

Retinaディスプレイが搭載されているApple製品は、以下の通りだよ。

Retinaディスプレイ搭載のApple製品

  • iPhone:iPhone4以降の製品
  • iPod touch:iPod touch4以降の製品
  • iPad:2012年3月以降に発売された製品
  • iPad mini:2013年10月以降に発売された製品
  • iPad Pro全製品
  • iPad Air全製品
  • MacBook:2015年~2017年(現時点では最終モデル)に発売された製品
  • MacBook Pro:2012年後半以降に発売された13インチ型、および2012年6月以降に発売された15インチ型、2019年に発売された16インチ型の製品
  • MacBook Air:2018年以降に発売された製品
  • iMac:2014年以降に発売された27インチ型、および2015年以降に発売された21.5インチ型の製品
  • iMac Pro全製品

出典:Appleサポート「Retina ディスプレイを使う」

プロフィール用アイコン
みきてぃ東西線

iPhoneは国内でのシェア率が高いので、Retinaに対応させるのに大変だよ。。。

Retinaと非Retinaにおける画像の見比べ

実際に、Retinaディスプレイと、普通のディスプレイにおける画像の解像度に違いはあるのでしょうか。

試しに、上は700px、下は1400pxの画像を700pxにリサイズした画像を用意しました。

注意点

iPhoneなどのスマートフォンから閲覧した場合は、画像が小さいので違いが分かりにくいです。

金魚の画像700px
700pxの大きさの画像
金魚の画像1400px
1400pxの大きさの画像

さて、もうお分かりですよね。

結論を言いますと、以下の通りとなります。

  • 普通のディスプレイ・・・2枚とも同じサイズの画像に見える
  • Retinaディスプレイ・・・下の画像が、上の画像よりキレイに見える

サイト/ブログをRetinaに対応させる方法

次に「サイト/ブログをRetinaディスプレイに対応させる方法」について説明します。

HTML

HTML5の場合、以下のように記述すれば、画像がキレイに表示されるのはいいですが・・・。

<img src="元画像のファイル名" width="元画像の1/2サイズの幅の値" height="元画像の1/2サイズの高さの値">

これだと、たくさんの画像を使うサイトやブログではかなり重くなってしまうデメリットがあります。

そこで、通常サイズの画像とRetina用の2倍サイズの画像を1枚ずつ用意し、HTML5のsrcset属性で画像サイズを振り分けていきます。

<img src="img/image-1.jpg" srcset="img/image-1.jpg 1x,img/image-1@2x.jpg 2x" alt="xxxxx">

これで、通常のモニターでは「image-1.jpg」(通常サイズ)の画像を表示し、Retinaディスプレイでは自動的に「image-1@2x.jpg」(Retina用の2倍サイズ)の画像を表示できるようになります。

プロフィール用アイコン
みきてぃ東西線

もちろん、WordPressでも上記のコードを「カスタムHTML」ブロック内に入れて記述することもできるよ!

注意点

IE11はsrcset属性には対応していません。

WordPress

WordPressではモニターの解像度に応じて、表示する画像サイズが自動的に振り分けられます。

ただし、それを有効させるには、通常の2倍サイズの画像をアップロードし、かつ記事内にて1/2に縮小した画像を貼り付けないと意味がありません。

また、テーマによってはそれ以外のサイズの画像が生成されることがあり、function.phpで編集する必要もあるので、とても面倒ですね。

テーマ「Cocoon」を使用している場合は、Cocoonの設定からRetinaに対応させることが可能です。

それ以外のテーマでRetinaに対応したい場合は、プラグイン「Simple Image Sizes」を使います。

WordPress Simple Image Sizesプラグイン
WordPress.org「Simple Image Sizes

導入方法は簡単。「プラグイン」→「新規追加」→「Simple Image Sizes」を検索して「インストール」・「有効化」します。

あとは、「設定」→「メディア」で、サムネイルなどテーマ側で自動生成されている縮小画像のサイズを2倍の値にするだけです。

例えば、テーマ「SANGO」における独自サムネイルのサイズをRetinaディスプレイに対応したい場合。

WordPress メディア設定画面(「Simple Image Sizes」で追加した画像サイズ)

以下のように、画像サイズの数値を2倍に変更するだけで簡単にできます。

WordPress メディア設定画面(「Simple Image Sizes」で追加した画像サイズ)

もちろん、他のテーマでも同じようにするだけで、独自サムネイル画像もRetinaに対応できます。


ついでに、記事本文に載せる画像のサイズも設定しましょう。

WordPressの「大サイズ」では、記事幅と同じサイズ(例えば、記事幅が700pxであれば、縦横700pxピッタリ)にします。

また、縦画像ではスマホ表示だと大きく感じる場合があるので、「サムネイル」サイズで縦横400pxに設定します。

なお、今回は「中サイズ」の自動生成はしないので、「中サイズ」の値を縦横両方とも0に設定します。

WordPress メディア設定画面

最後に、「変更を保存」をクリックするだけで、次回の画像アップロードから設定した値で画像の自動生成が行われます。

WordPress 「変更を保存」ボタン

既存の画像を今すぐ反映したい場合は、「Regenerate Thumbnails」をクリックするだけで簡単に出来ます(画像が多いと、反映完了まで時間がかかりますので、ご注意を)。

WordPress 「Regenerate Thumbnails」ボタン
プロフィール用アイコン
みきてぃ東西線

あとは、お手持ちのMacで開き、画像が無事にキレイに表示されているかどうか確認してね!

サイト/ブログをRetinaに対応させる場合の注意点

無事にサイト/ブログをRetinaディスプレイに対応できましたか?

口コミ用キャラクターアイコン

サイトの速度がダウンした・・・。どうしよう、これじゃ直帰率が上がってしまうよ・・・(泣)

おおっと、サイト/ブログをRetinaに対応したのに、サイト/ブログの読み込みが遅くなっちゃったのですか?

せっかくRetinaに対応したサイト/ブログでも、ページの読み込みが遅くなっては、SEO対策にも悪影響を及ぼしてしまいます。これでは勿体ないですよね。

そこで、最後に「サイト/ブログをRetinaに対応させる場合の注意点」について解説します。

画像の大きさを見直す

Retinaに対応する場合は、通常の2倍サイズの画像をアップするのが基本ですが、ページ速度の事も考えた場合、全記事の画像を2倍サイズにすると重くなってしまうこともあります。

通常の1.2~1.8倍のサイズでもキレイに表示できる場合がありますので、画像に応じてサイズを設定し直しましょう。

画像圧縮して容量を減らす

Squoosh

サイズを小さくしても、画像自体の容量はまだ重いので、画像圧縮ツールを使って容量を減らしていきます。

個人的には、Googleが開発している「Squoosh」が一番おすすめです。1枚ずつでしか作業はできませんが、MozJPEGやWebPに変換してくれるので、ほとんどデメリットが無いでしょう。

WebPを使う

WebPとは、Googleが開発している、JPEGやPNGなどの既存のフォーマットに変わる新しい画像フォーマットです。画像によって多少差がありますが、1枚の画像の容量が、JPEGよりさらに低くなりやすいです。

長らくWebpに未対応だったSafariもiOS14でようやくサポートされるようになりました。また、macOSでもBig Sur以降でサポートされるようになったので、導入を検討するのも良いでしょう。

Squoosh 設定パネル
Squoosh 設定パネル

「Squoosh」では、WebPにも簡単に変換することができます(「WebP」と「WebP V2」の2種類がありますが、どちらもWebP形式に変換してくれます)。

画像を遅延読み込みさせる

サイトやブログの速度改善を行うには、これが一番重要になっていきます。画像の遅延読み込みを行うことで、ページの読み込み時の負荷を減らすことができます。

HTML

「lazyload JavaScript」とネットで検索すると、色々と出てきますので、ご自身が使いやすいものを導入しましょう。

なお、JavaScriptによってはjQueryが必要な場合もありますのでご注意ください。

WordPress

バージョン5.5以降は画像遅延読み込み機能がサポートされていますが、必ずしも画像遅延読み込み機能が適用されるわけではありません。

したがって、画像の遅延読み込みを確実に行いたい場合は、テーマの機能やプラグインを使いましょう。

画像遅延読み込み機能のあるテーマを使っている場合は、そちらを使うのが望ましいですが、無い場合はプラグインを導入しましょう。

主な画像遅延読み込みプラグイン

まとめ

「Retinaディスプレイの基礎知識と、サイト/ブログをRetinaに対応させる方法」について解説しました。

サイト/ブログをRetinaディスプレイに対応させる方法は以下の通りです。

1.Retina用画像と通常ディスプレイ用画像を、それぞれ1枚ずつ用意する

2.Retina用の画像サイズを2倍(ページ速度重視なら1.2~1.8倍)にする

3.画像圧縮ツールで画像を圧縮する(できればWebP画像に変換する)

4.画像の遅延読み込み機能を有効化する

5-1.HTML5:srcset属性を使ってHTML内にコードを入れる

5-2.WordPress:「Simple Image Sizes」などで自動生成した画像を記事に貼り付ける

これだけで、Windowsでは通常の画像を表示させ、MacのRetinaディスプレイでは元画像を軽くした高解像度の画像を表示させることができます。

さらに、WebP対応のブラウザではWebPで表示され、画像遅延読み込み機能でページ読み込みの負荷を減らすことができ、スマホでもストレスなくサクサクと動くようになります。

また、何か良い方法がありましたら、随時更新していきます。

スポンサーリンク