resolution is typically expressed in dppx, dots per pixel unit, where 1dppx represents a standard-density display and 2dppx represents a high-density display with twice as many physical pixels per CSS pixel in each dimension, like Apple's Retina displays — this is commonly used with min-resolution to conditionally load a higher-resolution background image specifically for high-density screens, where a standard-resolution image would otherwise appear visibly blurry or soft when displayed at that higher physical pixel density. For actual <img> elements, the srcset attribute is generally the more modern, preferred, and more efficient technique for serving resolution-appropriate images, since the browser can choose and download only the one appropriate image variant, rather than a CSS media query approach potentially still downloading an image that ultimately goes unused.
1Understanding Resolution
resolution is typically expressed in dppx, dots per pixel unit, where 1dppx represents a standard-density display and 2dppx represents a high-density display with twice as many physical pixels per CSS pixel in each dimension, like Apple's Retina displays — this is commonly used with min-resolution to conditionally load a higher-resolution background image specifically for high-density screens, where a standard-resolution image would otherwise appear visibly blurry or soft when displayed at that higher physical pixel density. For actual <img> elements, the srcset attribute is generally the more modern, preferred, and more efficient technique for serving resolution-appropriate images, since the browser can choose and download only the one appropriate image variant, rather than a CSS media query approach potentially still downloading an image that ultimately goes unused.
For actual <img> elements specifically, prefer the srcset attribute over a resolution media query for serving different image resolutions — srcset lets the browser choose and download only the one genuinely appropriate image variant, while a CSS-based media query approach can end up downloading an image that ultimately goes unused.
.logo {
background-image: url("logo.png");
}
@media (min-resolution: 2dppx) {
.logo {
background-image: url("logo@2x.png");
}
}2Practical Example
Here is a real-world application of Resolution showing how it is used in production CSS code.
<img src="photo.jpg" srcset="photo.jpg 1x, photo@2x.jpg 2x" alt="A photo">3Best Practices
Follow these guidelines when working with Resolution:
1. Use a resolution media query specifically for background images set via CSS, where srcset, an HTML attribute, isn't applicable
2. Prefer the srcset attribute over a resolution media query for actual <img> elements, since it lets the browser download only the one genuinely needed image variant
3. Provide at minimum a 1x and 2x resolution image variant for background images intended to look crisp on both standard and high-density, Retina-style, displays
Tip: For actual <img> elements specifically, prefer the srcset attribute over a resolution media query for serving different image resolutions — srcset lets the browser choose and download only the one genuinely appropriate image variant, while a CSS-based media query approach can end up downloading an image that ultimately goes unused.
.logo {
background-image: url("logo.png");
}
@media (min-resolution: 2dppx) {
.logo {
background-image: url("logo@2x.png");
}
}