CSS and Images for Retina Displays

I see lots of blurry images out there on websites (and application webviews) designed for retina iPhone/iPad and more recently the new MacBook Pro. These images are not taking full advantage of the retina display’s pixel density.

Remember these things…

  • Retina displays render HTML at the same “pixel” size as standard displays. This means your old width:1024px website is rendered the same size on retina. No need to go back and update old size definitions because retina displays basically understand one pixel as four tiny pixels.
  • Retina HTML use four times the number of pixels to render those same elements (2X wide and 2X tall). System Fonts and CSS rendered graphics will convert to the new pixel density for free.
  • Since both retina and standard displays render elements the same size, images on retina displays need the need the extra pixel data to fill in the 4X pixels.

It’s real easy to take advantage of the retina display pixel density. Just double the size of your images. If the design calls for a 100×50 pixel image you need to serve up a 200×100 pixel image. Use CSS to define the image back down to 100×50. This condenses the pixel density of the image to match the retina display density.

IMG elements can be resized with the usual CSS. When resizing background images, the new CSS3 background-size property is your best buddy.

.example {
background-size: 100px 50px;
/*First number is width. Second number is height.*/

You can combine the background-size and background-repeat properties for tiled images.

Be smart about performance. Whenever possible, use HTML/CSS properties instead of images. Also, you can use a combination of CSS media queries and server side techniques to avoid serving large retina-size images to non-retina displays. I’ll explain that in more detail with a later post.


3 Responses to CSS and Images for Retina Displays

Leave a Reply

Your email address will not be published. Required fields are marked *