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-resolution 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
Using image-set() to provide alternative background-image options
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.
- MDN Understanding WCAG, Guideline 1.1 explanations
- Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
Specifications
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 4The definition of 'The image-set() notation' in that specification. | Working Draft |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
image-set()
|
Chrome Full support 21 Full support 21 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox No support No No support No Notes' See bug 1107646. |
IE
No support No |
Opera Full support 15 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Partial support 6 Partial support 6 Prefixed' Implemented with the vendor prefix: -webkit-
Notes' Support for |
WebView Android Full support 4.4 Full support 4.4 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 25 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android No support No No support No Notes' See bug 1107646. |
Opera Android Full support 14 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari iOS Partial support 6 Partial support 6 Prefixed' Implemented with the vendor prefix: -webkit-
Notes' Support for |
Samsung Internet Android Full support 1.5 Full support 1.5 Prefixed' Implemented with the vendor prefix: -webkit- |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- 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
image-set() by Mozilla Contributors is licensed under CC-BY-SA 2.5.