CSS image-resolution Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The image-resolution property specifies the intrinsic resolution of all raster images used in or on the element. It affects both content images (e.g. replaced elements and generated content) and decorative images (such as 'background-image'). The intrinsic resolution of an image is used to determine the image's intrinsic dimensions.

The image-resolution property has been deprecated or is no longer in any CSS working groups.

Initial value: normal
Applies to: Replace elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.imageResolution

Syntax

image-resolution: [from-image || <resolution>] && snap?

Values

from-imageThe image's intrinsic resolution is taken as that specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to '1ddpx'.
<resolution>Specifies the intrinsic resolution explicitly. A 'dot' in this case corresponds to a single image pixel.
snapIf the 'snap' keyword is provided, the computed '<resolution>' (if any) is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels.

Example

CSS

.class {
   image-resolution: 300dpi; 
}

Browser Support

The following table will show you the current browser support for the CSS image-resolution property.

Desktop

?	?	?	?	?

Tablets / Mobile

?	?	?	?	?	?

Support Us