CSS image-resolution Property
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
.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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
? | ? | ? | ? | ? | ? |