Widely availableSupported across all major browsers. Safe to use in production.
Syntax and cascade Widely available

image-set()

The image-set() CSS function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities.

Syntax and cascade

Overview

The image-set() CSS function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities.

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 function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links

Powered by web-features