image-set()で高解像度デバイスに最適な画像をCSSだけで出し分けるテクニック

7月 18, 2025 7月 18, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

画像を使ったWebデザイン、皆さんはどんな方法で高解像度対応をしていますか？

Retinaディスプレイ、4Kモニター、モバイル端末など、ユーザーの表示環境は年々多様化しています。

その中で「2倍の画像を別途用意する」「srcsetを使って指定する」といった方法が一般的ですが、CSS側からもより柔軟に対応できるのをご存知でしょうか？

そう、2023年以降本格的に注目されているのがCSSの image-set() 関数です。
これを使えば、画面解像度に応じた最適な画像をCSSだけで自動出し分けできるようになります。

今回はこの image-set() を活用した実装パターンや注意点、実用例を交えて解説します！

image-set()とは？

image-set() は、複数の画像とそれぞれの解像度を指定し、ユーザーのデバイス環境に応じて最適な1枚を選んでくれる CSS関数です。

1x, 2x, 3xのディスプレイ密度に合わせて画像を自動出し分け
WebPやAVIFなど、画像形式ごとのフォールバックも指定可能
CSSの background-image などで手軽に使用可能

基本構文

.hero { 
　background-image: image-set( url('hero.jpg') 1x, url('hero@2x.jpg') 2x, url('hero@3x.jpg') 3x ); 
}

このように、画像URLとスケール（1x, 2x…）をセットで並べていくだけで、ブラウザは最適な1枚を選択して描画してくれます。

フォーマット切り替えにも対応！

さらに、image-set() では解像度だけでなく、画像形式の切り替えにも対応できます。

たとえば以下のように記述することで、AVIFやWebPに対応している環境ではそれらを優先使用し、それ以外ではJPEGへとフォールバックさせられます。

.logo { 
background-image: image-set( url('logo.avif') type('image/avif'), url('logo.webp') type('image/webp'), url('logo.png') type('image/png') ); 
}

img要素ではなく背景画像向け

注意点として、image-set() はHTMLのタグでは使えません。
あくまで CSSのbackground-imageやborder-imageなどで利用する仕組みです。

img タグでの解像度対応をしたい場合は、以下のように srcset を使いましょう。

<img src="photo.jpg" srcset="photo.jpg 1x, photo@2x.jpg 2x" alt="写真の説明">

CSSとHTML、どちらの画像かでアプローチを使い分けることが重要です。

実践Tips：テーマ切り替えにも応用可能

light / dark モードでロゴ画像を切り替えるようなUIでもimage-set()は活躍します。

.logo { 
background-image: image-set( url('logo-light.png') 1x, url('logo-light@2x.png') 2x ); 
} 
@media (prefers-color-scheme: dark) { 
.logo { background-image: image-set( url('logo-dark.png') 1x, url('logo-dark@2x.png') 2x ); } 
}

これにより、ユーザーの環境と解像度に完全にフィットしたデザインが実現できます。

まとめ

image-set()はCSSで完結する次世代の画像制御！
解像度別に画像を用意するのは、これまでHTMLの属性やJSの力が必要でした。
しかし、 image-set() の登場により、CSSだけでスマートに、より軽量なレスポンシブ画像の出し分けが可能になりました。
現在対応しているのは Chromium系ブラウザが中心ですが、今後のスタンダードになることはほぼ間違いありません。
画像の見た目・軽量化・対応力をCSSでコントロールする。
これからのフロントエンドではますます重要な技術になりますよ。