The CSS3 image-resolution property defines the built in resolution of an image used in or on an element. It has effect on both the content of an image as well as the background of it.


selector { 

    image-resolution: from-image | resolution | from-image snap | resolution snap | initial | inherit;



The image-resolution property accepts following values:

  • from-image; Uses EXIF data from the image itself (image's built-in resolution). In case that is un-determined, the default will be '1ddpx'.
  • resolution; Specifies the wanted resolution to be applied with the dot representing a single image pixel.
  • snap; The specified resolution is rounded to the nearest value that would map one image pixel to an integer number of device pixels.
  • initialinherit


The example with image-resolution property and resolution snap value:


›› go to examples ››