フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

Retinaディスプレイで画像がぼやけるときの対策【初心者向け】

読了目安時間は約 3 分です。

MacやiPhone・iPadは、Retina(レティナ)ディスプレイが採用されていて、画面が非常にキレイなことはご承知の通りです。

でもWebサイトを制作したときに、なぜか画像がぼやけてしまうことがありませんか?

初心者の時につまづいた、この現象の対策をご紹介します。

目次

Retinaディスプレイとは

Retinaディスプレイが高画質な理由は、ピクセル数が通常の画面の2倍あるためです。これによってきめ細かい表現が可能になりました。

ただし、そのままだと小さく表示されてしまうので、画像を通常サイズに引き伸ばして表示します(下図参照)。

これが画像がぼやける原因です。

Web制作でRetinaディスプレイに対応する方法

2倍のサイズの画像を用意する

Web制作でのRetinaディスプレイ対策はカンタンで、表示させたいサイズの2倍の画像を用意すればOKです。

Retinaの場合と非Retinaの場合で画像を変える方法

すべての方がMacやiPhoneなどAppleユーザーなら上記でも良いのですが、実際はWindowsユーザーが多いので、2倍サイズの画像(=つまり重い)を多用するのは良くないです。

そこで【srcset属性】を使います。

srcset属性は、imgタグで使える属性で、サイズが違う画像を条件によって切り替えることができます。

具体的には

<img src=”URL/sample-img.jpg”
   srcset=”URL/sample-img.jpg 1x,
       URL/sample-img@2x.jpg 2x”
   alt=”〇〇〇〇”>

と記述します。

従来のディスプレイなら【1x】の画像、Retinaディスプレイなら【2x】の画像が読み込まれます。

srcとsrcset両方記述しておくと、IEのようなsrcsetに対応していないブラウザにも対応できます。

WindowsとMac両方で確認しよう

気をつけないといけないのは、確認の時です。どちらか片方しか表示されていないことに気づかないので、両方の環境で確認しましょう。Macで非Retinaディスプレイつないで確認するのもOKです。

まとめ

理屈がわかればカンタンに対策ができますよ。ぼやけたときはお試しください!

では。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる