この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
この記事を English (US) で読むこともできます。

The image-set() CSS function notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.

Resolution and bandwidth differ by device and network access. The image-set() function delivers the most appropriate image resolution for a user’s device, providing a set of image options — each with an associated resolution declaration — from which the browser picks the most appropriate for the device and settings. Resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high resolution screen may prefer to receive lower-res images rather than waiting for a higher resolution image to load.

image-set() allows the author to provide options rather than determining what each individual user needs.

Syntax

image-set() = image-set( <image-set-option># ) 
where <image-set-option> = [ <image> | <string> ] <resolution> and
      <string> is an <url>

Values

Most commonly you'll see an url() <string> value, but the <image> can be any image type except for an image set. The image-set() function can not be nested inside another image-set() function.

<resolution> units include x or dppx, for dots per pixel unit, dpi, for dots per inch, and dpcm for dots per centimeter. Every image within an image-set() must have a unique resolution.

Examples

background-image: image-set( "cat.png" 1x,
                             "cat-2x.png" 2x,
                             "cat-print.png" 600dpi);

This example shows how to use image-set() to provide two alternative background-image options, chosen depending on the resolution needed: a normal version and a high-resolution version.

Accessibility concerns

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

Specifications

Specification Status Comment
CSS Images Module Level 4
The definition of 'The image-set() notation' in that specification.
Working Draft  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
image-set()
Experimental
Chrome Full support 21
Prefixed
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 1107646.
IE No support NoOpera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Partial support 6
Prefixed Notes
Partial support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
WebView Android Full support 4.4
Prefixed
Full support 4.4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile No support NoFirefox Android No support No
Notes
No support No
Notes
Notes See bug 1107646.
Opera Android Full support 14
Prefixed
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Partial support 6
Prefixed Notes
Partial support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
Samsung Internet Android Full support 4.0
Prefixed
Full support 4.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

ドキュメントのタグと貢献者

最終更新者: dosentmatter,