Retina対応画像サイズ指定方法

html関連 css関連
2021年9月29日

iPhoneの高解像度のモニターに対応するためのcssの指定方法は以下

・背景画像の場合のcss 2倍サイズの画像を用意した上で

.hoge {
    background-image: url(../img/hoge.png);
    background-image: image-set(url(../img/hoge.png) 1x, url(../img/hoge@2x.png) 2x);
    background-image: -webkit-image-set(url(../img/hoge.png) 1x, url(../img/hoge@2x.png) 2x);
    ...
}

HTMLでの指定は

<img
    width="200"
    height="100"
    srcset="img/200.png 200w, img/400.png 400w, img/600.png 600w, img/800.png 800w, img/1000.png 1000w, img/1200.png 1200w, img/1400.png 1400w, img/1600.png 1600w, img/1800.png 1800w, img/2000.png 2000w"
    sizes="(max-width: 1000px) 100vw, 1000px"
    src="img/2000.png"
    alt="..."
/>

ちょっとめんどいが仕方ないので、最低限の画像で対応するしかない、

参考にさせてもらったサイト→「CSSの背景画像を最適化！Retinaディスプレイ(高解像度)対応する方法」

PAGE TOP