Using background-size to make crisp images for high resolution displays.

[TechStudio]

There are a lot of high resolution devices on the market now and it’s a trend that is getting more and more common. Even with normal DPI, I’ve noticed a lot of images, especially logos with thin text, that just don’t look crisp. I’ve taken to using the background-size CSS property and an oversized image to make things look crisp. This makes a lot of things look better on all screens, but it’s especially evident on high resolution displays such as retina displays.

Here is an example I set up on CodePen. Both logos are 300px squares, but the one on the right has a 1000px square image scaled into the 300px square element. If you view this on a high resolution display you’ll notice the difference.
http://codepen.io/ryanburnette/full/JEpLw

I was curious if anyone else is using this or other methods or if this might have any drawbacks. Thanks in advance for community feedback.

[TheDoc]

I used it on a recent project to make sure my icons (that are in a sprite) came through nice and crisp. The biggest drawback, of course is that you’re serving up an image that is twice the size (though perhaps not double the actual KBs).

In your example you’re using an image that is 3x the size, adding even further to my point above. For the time being, you really only need to go 2x in size.

In your CSS you can make sure that you’re only serving these larger images to screens that support it by using this handy little media query:

@media

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (   min--moz-device-pixel-ratio: 2),

only screen and (     -o-min-device-pixel-ratio: 2/1),

only screen and (        min-device-pixel-ratio: 2),

only screen and (                min-resolution: 192dpi),

only screen and (                min-resolution: 2dppx) {



/* Retina-specific stuff here */



}

https://css-tricks.com/snippets/css/retina-display-media-query/

[TechStudio]

I just saw that media query on the blog and I plan to start using it.

I’ve also been using Modernizr as it adds the class .backgroundsize to the HTML element if the background-size property is indeed supported.

This subject also reminds me how much I need to start playing with the SVG format.

[Author]

Posts