Jun 22, 2012 2
The MacBook Pro with Retina Display changed more than your appetite for resolution; it will change the way many people view the web. Because its resolution (around 300 dpi) is so much higher than most (72/96 dpi) screens, many websites will either look too small or many sites will begin to get fuzzy looking. (example below)
There’s a few ways to compensate. The way that will be discussed here is to use .svg for images where possible. SVG or Scalable Vector Graphics have been around since 1999 but have limited adoption for web use until recently. As usual, Internet Explorer lags in adoption, but the good news is that according to wikipedia, IE9 supports the basic svg feature set.
UPDATE: added .png example – thanks for the suggestion Chris!
These two images are both generated from Adobe Illustrator. The one on the left is our rusty-dusty .jpg format, the middle a transparency supporting .png while the one on the right is an crisp and smooth and transparency supporting .svg. What? You say they look the same? We say, right you are!
But wait and see what happens when you start to scale the exact same files.
The imagse on the left and in the middle is what your website will look like on a HiDpi screen like the Retina, whereas if you use .svg icons, navigation elements, and other graphics your site can stay clean, large and crisp.
And, because I love you and don’t want your websites to gain any weight, check out the file size on these images.
40px by 68px JPG: 4,329 bytes
40px by 68px PNG: 937 bytes
40px by 68px SVG: 1,273 bytes
You may be saying, but that’s barely a 4k footprint for file size for a .jpg That’s true. However the beauty of the .svg is that you can scale the dimensions indefinitely and it still maintains it’s original file size.
1000px by 1700 px JPG: 134,505 bytes
1000px by 1700 px PNG: 49,075 bytes
1000px by 1700 px SVG: 1,273 bytes
There’s a lot we could talk about to properly prepare svg files and how it will affect your website of the future. Feel free to reach out in the comments below or @stotion on twitter.
Protip: As of the writing of this post, WordPress doesn’t natively support the .svg file format. So, like the Zelda guru says “It’s Dangerous To Go Alone, Take This … SVG Plugin”
Yesterday, Chris gave a great presentation about the new navigation on the Apple.com navigation menu at Eli Kirk (where we’re coworkers constantly tweaking the web). It’s sporting a svg sprite with subtle dimensionality effects. It’s a well-crafted and not-too-hard-to-recreate example.