Welcome to the 55 Minutes blog.
55 Minutes is a web development consultancy in San Francisco building apps for design-led businesses and startups. On this blog we discuss the technology tools of our trade: Ruby on Rails, Django, Sass, OS X, and more.
Adding Retina Graphics to Your Website
By Richa on
Dec 08, 2011
If you’re building your site using responsive web design and testing on the iPhone 4, you’ll immediately notice that standard web graphics appear chunky or blurry compared to the iPhone’s razor-sharp text. This is due to how web pages are rendered on the iPhone’s “retina display”, or more generically, its higher-than-1.0-pixel-density screen1. Getting a sharp image on these screens requires a bit more work. Here’s a practical example.
Say I begin with markup that looks like this:
and styles that look like this (written in Sass using the SCSS syntax):
To get a nice crisp logo to appear on the retina display, I’ll need to create a double-resolution image file. Assuming my original logo is vector-based, this is straightforward: just rasterize it at twice the size. The convention is to name this new file with the suffix “@2x”.
After creating my double-resolution image file, all I would need to do is add a CSS3 media query for the pixel density, like so: