私が使っているのは、iMac 27インチ、デュアルディスプレイにしていてEIZOの24インチを縦にして横においてます。
画面がでかくてほんとに快適ですが、weｂサイトをみているとたまに画像がボケボケなものを見つけます。
EIZOでみると普通、iMacの画面がRetinaといって、解像度２倍の鬼きれいなモニターだからですね、、。
なのでサイトを制作してるときも、100％の画像をそのままはめてもきれいには見えません。
だからって画像サイズを大きくすると、どんどんサイトが重くなってしまいますよね。
そういう場合は、Retinaやスマホなど用に大きいサイズの画像を用意して、
２倍の解像度のデバイスでみたときに、違う画像を表示するようにコードをかき分けます。
●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でもきれいにみせたいですね＾＾
top