スマートフォンでWEBサイトを見る時に画像をぼやけさせない方法(Retinaディスプレイ対応)

2020.08.12.

ホームページ制作

株式会社TREVOの月額制ホームページ制作サービス
PR

スマートフォンでWEBサイトを見る時に画像をぼやけさせない方法(Retinaディスプレイ対応)
WEBサイトをパソコンで見た時は綺麗に画像が表示されていたのに、Retinaディスプレイを採用しているスマートフォンで見ると画像がぼやけて鮮明に見えないことがあります。
どうしてRetinaディスプレイスで画像がぼやけるのか、またその対応を説明をいたします。

Retinaディスプレイとは

Retinaディスプレイとは高精細ディスプレイの名称で、高画素密度を保持した高画素ディスプレイのことで、2010年に発売されたiPhone4から搭載されました。
通常のディスプレは解像度を100~200dpiの設定ですが、Retinaディスプレイは約2倍になる高画素密度なディスプレイで、1つ1つのドットが細かく、より高品質な画像や映像を画面に映すことができます。

ほやける原因

結論は元画像が小さいたためRetinaディスプレイなどの高解像度ディスプレイではぼやけて見えてしまう。
通常のディスプレは画像は等倍で表示されますが、Retinaディスプレイは2倍のピクセルになるので画像の縦横が2倍に引き伸ばされて表示されてしまいます。
そのため、画像が小さいとぼやけて表示されてしまいます。
Retinaディスプレイの専門的な詳しい構造はここではしませんが、例えば横幅200pxの画像を綺麗に表示させるには、2倍の横幅400pxが必要になります。

Retinaディスプレイへの対応方法

画像(img)要素に直接指定する方法

表示させるたいサイズの倍サイズで画像を作成してHTMLでサイズを指定する方法になります。
100px×100pxの画像を表示させたい場合は200px×200pxの画像をサイズで作成します。
スマートフォンでWEBサイトを見る時に画像をぼやけさせない方法(Retinaディスプレイ対応)
このまま表示させると当然、100px×100pxとは200px×200pxの画像で表示されます。

大きい方の画像のwidthとheightのサイズ指定を表示させたいサイズに変更します。
<img src=”倍のサイズの画像URL” width=”実際の半分の幅” height=”実際の半分の高さ”>
今回の場合は100px×100pxにします。

比較画像
Retinaディスプレイスで画像がぼやける
100px×100pxの画像がぼやけています。

html5のsrcset属性を使う方法

先ほどは画像サイズを指定する方法でしたがsrcset属性を使うと画像サイズを指定しなくても表示サイズを1/2の大きさに縮小してくれます。
htmlに記述するには下記のコードになります。
<img src=”サイズの画像URL” srcset=”倍のサイズの画像URL 2x”>
このようにすることで、widthとheightを指定ぜずに、画像を1/2に縮小表示することができます。
読み込みの条件は画像パスの後ろにある「2x」が分岐条件になります。
「1x」だと通常
「2x」だとRetinaディスプレイ
「4x」だと4Kディスプレイ
などデバイスの大きさに合わせて読み込む画像を自動的に変えてくれます。

まとめ

Retinaディスプレイ対応として倍のサイズで作成と言いましたが、場合によっては縦横1.2~1.5倍でも綺麗に表示されることがあります。
近年のWEBサイトはページの表示スピードを速くする流れになっていますので大きい画像を作成する場合でも、読み込みスピードを少しでも上げるために容量に注意することも必要です。

関連の記事

ホームページ ( サイト ) を運営する上で参考になる本

自社でホームページ運営の担当スタッフを育てる時に、まずは読んでおいた方が良い弊社にある書籍を紹介していきます。 毎月、SEOやホームページ制作に関する書籍を数冊購入しているのですが正直ネットの情報の方が速い場合があるのは事実です。 それでも、紙の本でじっくりと書き込みながら読めるのが本の最大の特徴で[...]

  • Avatar TREVOWP
ホームページをリニューアルしました。

ホームページをリニューアルして、これまで2サイトあったTREVOのホームページを一つに統合しました。 ビジネスよりのpic-web.jpとフラグシップという形でシンプルでレスポン部ウェブデザインのtrevo-web.comの2サイトを運営していたのですが、この度サイトのリニューアルと共に統合する事に[...]

  • Avatar TREVOWP
動画制作の難しさと楽しさ

ホームページの制作は、ディレクターとデザイナーで制作できます。またによってはデザイナーのみで仕事が完結することもあります。 動画は制作するには、ディレクター、カメラマン、照明、編集とそれぞれ役割のスタッフが必要になり動画内容によっては、ナレータやモデル、依頼したお客様自身がにインタビューに応えて頂い[...]

  • Avatar TREVOWP
no image
嬉しいはずの三連休が

社員時代は三連休が凄く待ち遠しくて嬉しかったのですが、今では自分の会社なので考え方が少し変わりました。三連休となると、1日仕事が遅れてしまいます。ブログも休みなり、リズムが狂ったような気がして嬉しいはずの三連休も仕事に出てしまっています。 [...]

  • Avatar TREVOWP