AFFILIATEBLOGWebデザインRetinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法Webデザイン2019.04.24Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法さまざまなテクノロジーが発展する昨今、スマホやモバイル端末でも、とても美しい画質で画像や映像を見られるようになりました。iPhoneやMacなどで採用されているRetina(レティーナ)ディスプレイで画像がぼやけていたり、鮮明に表示されないことがあります。高画質な液晶で評判のRetinaディスプレイで画像がぼやけるのか。その理由と対策を本稿で説明いたします。RetinaディスプレイとはRetina(英語で網膜という意味)はApple社の高精細ディスプレイの名称で、肉眼では判断できないほど細かな解像度のディスプレイのことです。液晶画面では無数の光が別々の色を発することで画像を表示しています。その光の数(ピクセル)が多いほど高解像度の画像や映像を表示することが可能です。Apple以外でも高精細なディスプレイを搭載した端末は多くあり、Retinaに限らず様々なデバイスで美しい液晶画面は当たり前になってきています。Retinaディスプレイの仕組みでは、どのように画像を美しく表示しているのか。従来のブラウザで高解像を実現するには、画面のサイズを大きくする必要がありました。Retinaディスプレイでは、通常の液晶画面の2倍のピクセル数を通常の画面サイズのまま表現することができます。Retinaディスプレイを搭載したiPhone7の液晶画面は100万画素ですので、光の点が画面の中に100万個あるイメージになります。Retinaディスプレイ実装前のiPhone3GS(約15万画素)と比べると差は一目瞭然で、iphone7の方が5倍以上のピクセル数をもっているので画像をよりきめ細やかに表示できるというわけです。Retinaディスプレイがゆえの注意点Retinaディスプレイは、一般のユーザーにとっては画像や映像が美しく表示され、良い点ばかりが目立ちますが、Web制作に携わる側にとってはいくつか注意が必要な点があります。ウェブサイトの画像がぼやけて見える非Retinaディスプレイで普通に表示されていた画像が、Retinaディスプレイではぼやけて見えることがあります。通常等倍で表示されていた画像が、2倍のピクセルを持つRetinaディスプレイでは画像の縦横が2倍に引き伸ばされて表示されることが原因です。画面キャプチャ(スクリーンショット)が2倍のサイズになる画面キャプチャを撮ると画像の縦横の長さが2倍になります。非Retinaディスプレイでキャプチャを撮る際は、見えているままのサイズで画像が書き出されますが、Retinaディスプレイで実寸が幅800pxの画像を表示し、キャプチャを撮ると幅が1600pxになります。キャプチャ画像をそのままのサイズで共有したり、アップロードする際にはリサイズが必要になります。上記のような注意点があるので、Retinaディスプレイ対応は必須です。対応策は至ってシンプルで、使用する画像を縦横2倍で作成し、ブラウザ上で半分のサイズに縮小します。ブラウザ上で幅200pxで表示したい画像があれば、実際は幅が400pxの画像を用意し、それを画面上で縦横半分のサイズで表示させます。することで倍の解像度のRetinaディスプレイでも画像を美しく表示させることが可能です。Retinaディスプレイで画像がぼやけて表示される場合は、その画像の実際のサイズと、ブラウザ上に表示されている画面上のサイズが全く同じ場合がほとんどです。倍のサイズの画像を貼り付ける際は下記のように記述することで改善されるでしょう。height="実際の半分の高さ">なお弊社のほとんどのテーマではロゴ画像に「レティナディスプレイ用のロゴ画像を利用する」という機能をご用意しておりますので、縦横が倍の画像をご用意して頂くだけで、綺麗に表示することが可能です。サイズの大きな画像を読み込むことで容量が大きくなることは否めません。容量が大きくなる問題を解消できて、ディスプレイに応じて異なる画像を表示できるsrcsetという属性を使う方法があります。1x」のように倍率(1x)を指定します。その後にカンマ(,)でつなげて、複数の倍率毎に画像を指定する下記のような書き方です。image">上記のように画像と画像が読み込まれる条件を指定することで、通常のディスプレイの場合はimg/sample01.jpg(通常サイズの画像)、Retinaディスプレイの場合はimg/sample02.jpg(縦横倍のサイズの画像)が表示されます。通常のディスプレイの場合は「img/sample01.jpg」のみが読み込まれるので、サイズ毎に画像を指定しても不必要に重い画像が読み込まれることが無く、容量を軽減できるというわけです。IEなどのsrcsetに未対応のブラウザでは、srcに指定されている通常の画像のみが読み込まれるので注意が必要です。srcset対応ブラウザについてまとめRetinaディスプレイの仕組みや、綺麗に表示されない原因は、ご理解頂けましたでしょうか。新しい技術が生まれるこのような業界ではその都度どのように対応させていくかを考えることも大切です。画像によっては縦横1.2〜1.5倍のサイズでも十分綺麗に表示される場合もあるので、読み込みに負担がかかるようであれば、倍率を小さめにして調整するのも一つの手段といえるでしょう。動画解説も用意しておりますのでよろしければどうぞ。Retinaでロゴ画像がボヤけるといった疑問にも回答しています。...2020.02.11ワードやエクセルの表をテーブルタグに変換する便利なツール・ジェネレータ集2020.02.10上質な癒しを感覚レベルで訴えかける。Macでzip圧縮する時に注意しておきたいこと。2019.12.28【初心者向け】Gitとは何なのか。基本用語やその仕組みをまとめています。2019.12.27WEBマーケティングより広義のデジタルマーケティングについて基本から考える2019.09.18今更聞けない?Webサイトのアクセス解析やマーケティングにおいて知っておくべき基本用語2019.09.17読み手の心を動かすコピーライターの仕事とは?ライティングやコピーの基本要素を知ろう2019.07.21国内有力ウェブメディア17サイトの記事更新頻度を調査してみた。No.1】人はコンテンツのどこをどう評価するのか。コンテンツマーケティングに関する重要な話2019.07.01スクリーンショットの撮り方でここまで変わる!かっこいい記事にする為の10のテクニック2019.04.07強烈なインパクトでユーザーの視線を鷲掴みにするWordPressテーマ【MAXX】のトップページについて2017.01.26ファーストビューで動画を使うと見る側にどう伝わっているかという考察記事2019.12.15プロ級の会員制サイト運営をあなたの手に。No.1】人はコンテンツのどこをどう評価するのか。