- Tip 1: Use 'Mobile First' Media Queries
- Tip 2: Support Older IE Versions with a Polyfill
- Tip 3: Use a Very Wide Header Image to Suit Multiple Screen Widths
- Tip 4: Use Viewport Meta Sparingly, and Let Users Zoom
- Tip 5: Serve Larger Images for High-Resolution Displays
- Tip 6: Avoid Using Images and Other Separate Asset Files
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Tip 5: Serve Larger Images for High-Resolution Displays
The large number of high-resolution devices appearing on the market is definitely changing the way we think about web design. High-resolution mobile devices tend to render a page with an assumed viewport width; on top of that, they also apply a default zoom factor! Otherwise, the content would appear very small.
This approach works fine for vector graphics such as text, SVG, and other visuals rendered by the browser, but for images it gets problematic. When a raster image is zoomed, it can look "pixel-y" and horrible. What can we do to solve this problem?
One tip is to start serving larger images than necessary. For an HTML <img>, for example, create the image larger than you need it to be, and then scale it down using a width attribute:
<img src="images/icon-64px.png" width="480px">
Now the image will look smoother on high-resolution devices, because you've supplied more image information for the device to use.
For CSS background images, you can use a media query to detect higher-resolution devices, and then serve a larger image as appropriate:
ul li:nth-of-type(1) a {
background: url(icons/home-32.png) top center no-repeat;
padding-left: 32px;
}
@media all and (-o-min-device-pixel-ratio: 3/2) {
ul li:nth-of-type(1) a {
background: url(icons/home-48.png) top center no-repeat;
padding-left: 48px;
}
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
ul li:nth-of-type(1) a {
background: url(icons/home-48.png) top center no-repeat;
padding-left: 48px;
}
}
Notice that WebKit-based and Opera browsers use different unit values for this media query type. Having to provide both is a pain, but in the future this difference will disappear, as all browsers converge on supporting the standard resolution media feature, which does the same job, and it accepts values with a unit of dots per pixel (dppx).