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

執筆・編集 衣川 知秀デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。

3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み:AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条:私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
執筆記事:記事一覧ページ
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の画像をサイズで作成します。
このまま表示させると当然、100px×100pxとは200px×200pxの画像で表示されます。
大きい方の画像のwidthとheightのサイズ指定を表示させたいサイズに変更します。
<img src=”倍のサイズの画像URL” width=”実際の半分の幅” height=”実際の半分の高さ”>
今回の場合は100px×100pxにします。
比較画像
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サイトはページの表示スピードを速くする流れになっていますので大きい画像を作成する場合でも、読み込みスピードを少しでも上げるために容量に注意することも必要です。
大阪のホームページ制作会社TREVOでは、最短2日で仮サイトを公開できるスピード対応や、SEO対策に強いオリジナルデザインの制作サービスを提供しています。
関連の記事
-
板浪雅樹
-
ヤフーで「ががばば」検索すると「世にも奇妙な物語」に案内されます。
TREVOスタッフ
-
フリーで素晴らしいWordPressのデザインのテーマを無料(フリー)で配布しているサイト
衣川知秀
-
板浪雅樹
-
TREVOスタッフ
-
板浪雅樹