Widely available Supported across all major browsers. Safe to use in production.

image-set()

The image-set() CSS functional 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 and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.background-image.image-set
113
113
89
17
113
17
CSS property
image-set

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

The image-set() CSS functional notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.
113
113
89
17
113
17
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 5 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (113)
  • Available with a vendor prefix: -webkit- (20)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (113)
Implementation note
  • Support for `url` images only and `x` is the only supported resolution unit.
Notes 5 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (113)
  • Available with a vendor prefix: -webkit- (79)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (113)
Implementation note
  • Support for `url` images only and `x` is the only supported resolution unit.
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (89)
Implementation note
  • The `type()` function is not supported as an argument to `image-set()`.
Compatibility
  • Available with a vendor prefix: -webkit- (90)
Notes 8 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (17)
  • This feature was removed in a later browser version (14)
Implementation note
  • The `type()` function is not supported as an argument to `image-set()`.
  • Support for `url` images only and `x` is the only supported resolution unit.
Compatibility
  • Available with a vendor prefix: -webkit- (17)
  • Available with a vendor prefix: -webkit- (14)
  • Available with a vendor prefix: -webkit- (6)
Notes 5 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (113)
  • Available with a vendor prefix: -webkit- (25)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (113)
Implementation note
  • Support for `url` images only and `x` is the only supported resolution unit.
Notes 8 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (17)
  • This feature was removed in a later browser version (14)
Implementation note
  • The `type()` function is not supported as an argument to `image-set()`.
  • Support for `url` images only and `x` is the only supported resolution unit.
Compatibility
  • Available with a vendor prefix: -webkit- (17)
  • Available with a vendor prefix: -webkit- (14)
  • Available with a vendor prefix: -webkit- (6)
Notes 5 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (113)
  • Available with a vendor prefix: -webkit- (20)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (113)
Implementation note
  • Support for `url` images only and `x` is the only supported resolution unit.
Notes 5 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (113)
  • Available with a vendor prefix: -webkit- (79)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (113)
Implementation note
  • Support for `url` images only and `x` is the only supported resolution unit.
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (89)
Implementation note
  • The `type()` function is not supported as an argument to `image-set()`.
Compatibility
  • Available with a vendor prefix: -webkit- (90)
Notes 8 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (17)
  • This feature was removed in a later browser version (14)
Implementation note
  • The `type()` function is not supported as an argument to `image-set()`.
  • Support for `url` images only and `x` is the only supported resolution unit.
Compatibility
  • Available with a vendor prefix: -webkit- (17)
  • Available with a vendor prefix: -webkit- (14)
  • Available with a vendor prefix: -webkit- (6)
Notes 5 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (113)
  • Available with a vendor prefix: -webkit- (25)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (113)
Implementation note
  • Support for `url` images only and `x` is the only supported resolution unit.
Notes 8 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (17)
  • This feature was removed in a later browser version (14)
Implementation note
  • The `type()` function is not supported as an argument to `image-set()`.
  • Support for `url` images only and `x` is the only supported resolution unit.
Compatibility
  • Available with a vendor prefix: -webkit- (17)
  • Available with a vendor prefix: -webkit- (14)
  • Available with a vendor prefix: -webkit- (6)
Notes 5 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (113)
  • Available with a vendor prefix: -webkit- (20)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (113)
Implementation note
  • Support for `url` images only and `x` is the only supported resolution unit.
Notes 5 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (113)
  • Available with a vendor prefix: -webkit- (79)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (113)
Implementation note
  • Support for `url` images only and `x` is the only supported resolution unit.
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (89)
Implementation note
  • The `type()` function is not supported as an argument to `image-set()`.
Compatibility
  • Available with a vendor prefix: -webkit- (90)
Notes 8 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (17)
  • This feature was removed in a later browser version (14)
Implementation note
  • The `type()` function is not supported as an argument to `image-set()`.
  • Support for `url` images only and `x` is the only supported resolution unit.
Compatibility
  • Available with a vendor prefix: -webkit- (17)
  • Available with a vendor prefix: -webkit- (14)
  • Available with a vendor prefix: -webkit- (6)
Notes 5 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (113)
  • Available with a vendor prefix: -webkit- (25)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (113)
Implementation note
  • Support for `url` images only and `x` is the only supported resolution unit.
Notes 8 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (17)
  • This feature was removed in a later browser version (14)
Implementation note
  • The `type()` function is not supported as an argument to `image-set()`.
  • Support for `url` images only and `x` is the only supported resolution unit.
Compatibility
  • Available with a vendor prefix: -webkit- (17)
  • Available with a vendor prefix: -webkit- (14)
  • Available with a vendor prefix: -webkit- (6)

Syntax

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

Live demo

1x standardresolution

CSS 1x standardresolution demo.

PreviewFullscreen

2x highresolution

CSS 2x highresolution demo.

PreviewFullscreen

fo-matpriority

CSS fo-matpriority demo.

PreviewFullscreen

Use cases

  • Using image-set()

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

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links