May 7th, 2014

Retina Optimization: Not just for Apple users anymore!

With the new generation of Apple Retina displays in popular use, Web images look better than ever on Apple laptops, desktops and mobile devices, such as the iPhone and iPad. While this seems most relevant for Apple users, non-Apple users should be careful to not dismiss the wide use of Retina technology. If you haven’t updated the imagery on your website, this high pixel density technology can make your logo look pixelated on a Retina display.

If Retina displays are designed to improve image quality, you might be wondering why your current images will appear a little fuzzy. Retina displays, or liquid crystal displays with a pixel density high enough that you cannot discern individual pixels, feature 2-3 times as many pixels per inch (PPI) than a standard display. Graphic, such as your logo for example, have the same physical dimensions on a standard display as on a hi-density display, meaning the Retina display has to artificially increase the number of pixels in your image in order for it to appear the same physical size – resulting in a pixelated or fuzzy logo.

Luckily, incorporating retina optimized graphics into your current web design isn't super difficult. While you could simply double the size of the images on your website, this also means that you are more than doubling the file size of the image, which could significantly strain the bandwidth for your views, particularly while viewing your site on a mobile device. There are a few simple solutions that are better for Retina optimizing graphics on your site:

  • CSS Sprite

    Instead of custom graphics, you can use CSS to write your site’s visual landscape, such as gradients, rounded corner, etc. CSS Sprite is hardly new and adds an extra bit of complexity to your site, but it will allow you to create an "override" from your normal resolution image to a high-resolution image.

  • SVGs

    Scalable Vector Graphics are ideal for logos. SVGs use mathematical expressions instead of pixels, so they can be scaled to various sizes without losing image quality. SVGs file sizes are also smaller than pixel-based graphics and are viewable on almost all modern browsers, including mobile versions.

  • Icon Fonts

    Icon Fonts are widely available and can be easily scaled, edited and maintained. Once embedded into your Web design, an Icon Font can be scaled to any size while remaining crisp and clear.

For additional resources and tips on updating your graphics for a Retina display, check out Apple's developer page.

Leave a Comment
* Name
* Email (will not be published)
* Enter verification code
* - Reqiured fields
Older Post Home Newer Post