- This topic is empty.
-
AuthorPosts
-
September 2, 2012 at 11:24 pm #39630TechStudioMember
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/JEpLwI was curious if anyone else is using this or other methods or if this might have any drawbacks. Thanks in advance for community feedback.
September 3, 2012 at 2:55 am #108951TheDocMemberI 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/
September 3, 2012 at 11:18 am #109181TechStudioMemberI 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.