
Security News
Django Joins curl in Pushing Back on AI Slop Security Reports
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.
postcss-image-set-function
Advanced tools
Display resolution-dependent images using the image-set() function in CSS
The postcss-image-set-function package is a PostCSS plugin that allows you to polyfill the CSS image-set function. This function is used to specify different images to use in different situations, such as high-resolution displays or different types of devices. The plugin transforms image-set notation into a background-image declaration that is compatible with all browsers.
Transform image-set function
This feature allows you to write CSS using the image-set function, which the plugin will then transform into a background-image property with corresponding -webkit-image-set for compatibility with browsers that support it.
background-image: image-set('img/test.png' 1x, 'img/test-2x.png' 2x, 'img/test-print.png' 600dpi);
Fallback for browsers without image-set support
The plugin provides a fallback for browsers that do not support the image-set function by outputting a standard background-image property with the 1x image as the default.
background-image: url('img/test.png');
background-image: image-set('img/test.png' 1x, 'img/test-2x.png' 2x);
postcss-preset-env is a plugin that allows you to use future CSS features today. It includes polyfills for various CSS features, including the image-set function, similar to postcss-image-set-function, but it is more comprehensive as it covers a wide range of CSS features.
postcss-assets is a PostCSS plugin that helps manage project assets. It can resolve paths, inline files, and more. While it does not directly polyfill the image-set function, it can be used in conjunction with other plugins to manage images and resolutions, which is a part of what postcss-image-set-function does.
PostCSS image-set() Function lets you display resolution-dependent images
using the image-set()
function in CSS, following the CSS Images
specification.
.example {
background-image: image-set(
url(img.png) 1x,
url(img@2x.png) 2x,
url(img@print.png) 600dpi
);
}
/* becomes */
.example {
background-image: url(img.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.example {
background-image: url(img@2x.png);
}
}
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
.example {
background-image: url(my@print.png);
}
}
.example {
background-image: image-set(
url(img.png) 1x,
url(img@2x.png) 2x,
url(img@print.png) 600dpi
);
}
Add PostCSS image-set() Function to your project:
npm install postcss-image-set-function --save-dev
Use PostCSS image-set() Function as a PostCSS plugin:
const postcss = require('postcss');
const postcssImageSetFunction = require('postcss-image-set-function');
postcss([
postcssImageSetFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS image-set() Function runs in all Node environments, with special instructions for:
Node | PostCSS CLI | Webpack | Gulp | Grunt |
---|
The preserve
option determines whether the original declaration using
image-set()
is preserved. By default, it is preserved.
postcssImageSetFunction({ preserve: false })
.example {
background-image: image-set(
url(img.png) 1x,
url(img@2x.png) 2x,
url(img@print.png) 600dpi
);
}
/* becomes */
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
.example {
background-image: url(img.png);
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.example {
background-image: url(img@2x.png);
}
}
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
.example {
background-image: url(my@print.png);
}
}
The onInvalid
option determines how invalid usage of image-set()
should be
handled. By default, invalid usages of image-set()
are ignored.
They can be configured to emit a warning with warn
or throw an exception with throw
.
postcssImageSetFunction({ onInvalid: 'warn' }) // warn on invalid usages
postcssImageSetFunction({ onInvalid: 'throw' }) // throw on invalid usages
The image-set()
function allows an author to provide multiple resolutions of
an image and let the browser decide which is most appropriate in a given
situation. The image-set()
also never fails to choose an image; the
<resolution>
just helps determine which of the images is chosen.
Since this plugin is not a browser, the image options are sorted by device pixel ratio and the lowest ratio is used as the default, while the remaining images are pushed behind media queries.
Therefore, this plugin can only approximate native browser behavior. While images should typically match the resolution as the device they’re being viewed in, other factors can affect the chosen image. For example, if the user is on a slow mobile connection, the browser may prefer to select a lower-res image rather than wait for a larger, resolution-matching image to load.
FAQs
Display resolution-dependent images using the image-set() function in CSS
The npm package postcss-image-set-function receives a total of 5,331,403 weekly downloads. As such, postcss-image-set-function popularity was classified as popular.
We found that postcss-image-set-function demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.