Retinaでも画像をきれいにみせたい

私が使っているのは、iMac 27インチ、デュアルディスプレイにしていてEIZOの24インチを縦にして横においてます。
画面がでかくてほんとに快適ですが、webサイトをみているとたまに画像がボケボケなものを見つけます。
EIZOでみると普通、iMacの画面がRetinaといって、解像度2倍の鬼きれいなモニターだからですね、、。

なのでサイトを制作してるときも、100%の画像をそのままはめてもきれいには見えません。
だからって画像サイズを大きくすると、どんどんサイトが重くなってしまいますよね。

そういう場合は、Retinaやスマホなど用に大きいサイズの画像を用意して、
2倍の解像度のデバイスでみたときに、違う画像を表示するようにコードをかき分けます。

●htmlのimgタグではsrcsetで指定。

<img src="image/sample.jpg" width="100" height="100" alt="サンプル画像です" srcset="image/sample.jpg 1x,image/sample@2x.jpg 2x">

●CSSではメディアクエリを利用

/* 通常表示 */
background: url(image/sample.jpg) 0 0 no-repeat;


/* Retina用 */
@media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){

background: url(image/sample@2x.jpg) 0 0 no-repeat;

}

いずれにせよ大きい画像は容量をくうので、、
カバー画像など大事な画像はRetinaでもきれいにみせたいですね^^

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


top