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.
image-set() = image-set( <image-set-option># ) where <image-set-option> = [ <image> | <string> ] <resolution> and <string> is an <url>
<image>can be any image type except for an image set. The
image-set()function may not be nested inside another
url()to an image.
dppx, for dots per pixel unit,
dpi, for dots per inch, and
dpcmfor dots per centimeter. Every image within an
image-set()must have a unique resolution.
- A valid MIME type string, for example "image/jpeg".
In the next example the
type() function is used to serve the image in AVIF and JPEG formats. If the browser supports avif, it will choose that version. Otherwise it will use the jpeg version.
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.
|CSS Images Module Level 4
The definition of 'The image-set() notation' in that specification.
BCD tables only load in the browser