Retina Sites

[stephanwb]

What's the best way to make a site retina ready? Just code one site with retina resolution graphics or rather serve up two different sets of graphics depending on what comp is being used on the other end?

Thanks in advance. I appreciate the input.

Stephan

[willcritchlow]

Hi Stephan,

Before you spend _too _long on this, I'd make sure it's the best use of your time - regular images do work on retina displays and so you may have higher priorities.

In many ways (simplicity, maintainability, design) the best route is to use retina-ready images throughout your site and serve them up to non-retina users as well. This typically results in better images for all and doesn't have to impact filesize too much (see this article about compressing larger images).

The downside is that for certain kinds of images, the larger image will still have a much larger filesize and this can be a major speed issue - especially for those on mobile connections.

Unless you have evidence that one or other effect (fuzzy images on retina or slow loading) is causing you problems, I would personally take an "if it ain't broke" approach. The complexity of maintaining two sets of images is a step too far for most websites in my opinion and I would tend to stick with regular images up until the point where high resolution displays are significant among your users and plan to switch to high-resolution images for all at that point.

I hope that helps.