Retina display is a brand name used by Apple for its series of displays that have a higher pixel density than traditional Apple displays. The pixel density of Retina displays is so high that your eyes can't detect individual pixels at a normal viewing distance. This gives content incredible detail and dramatically improves your viewing experience. In the simplest of terms, it means a high definition display.
Since designers and developers now have to accommodate different types of displays, this means two things:
users with Retina displays will either have badly displayed images on designs that do not include Retina support, or
on the designs that do support Retina, users will enjoy high quality, crisp imagery
When a product has a Retina display, each user interface element is doubled in width and height to compensate for the smaller pixels. Apple calls this mode HiDPI mode. The goal of Retina displays is to make the display of text and images extremely crisp, so pixels are not visible to the naked eye.
Apple products are not exclusive to this type of display. Retina is simply Apple’s term, but other phones, tablets and monitors also have higher quality displays. Because these displays are being widely implemented and used, it is more important than ever to create websites and apps that support these displays.
The basic concept of a Retina image is that you’re taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and setting the image to fill half of that space (100 x 100 pixels). This can be done manually by setting the height and width in HTML to half the size of your image file.
At Bluespark, we use Sketch, which makes it easy to export your images at 1x, 2x and 3x for Retina. Simply select your asset, choose “make exportable”, then select your size, prefix/suffix, and format. Use the “+” sign in the export area to add each variation of 1x, 2x and so forth. You can then export all the variations wherever you’d like to on your machine, however at Bluespark we go about it a little differently. Once we set all of our graphics to export as we like, we use Craft to synch our entire artboard(s) to Invision and take advantage of the Invision Inspect feature, which stores and organizes all versions of the images for easy download by developers, as well as providing key details and working code.
From there, the goal is to serve different images based on the device being used by the viewer. That can be done in a few different ways, depending on the technology you’re using:
Why is Retina important in Responsive Web Design?
Being that the newest mobile Apple devices (as well as other brands) have Retina displays, when creating a responsive website you also need to accommodate Retina images into them for the best display. The best display also means the best experience.
On a related note, SVG is an image format for vector graphics that allows those vectors to scale up or down in size without losing their shape. Because vectors are composed of a fixed shape instead of pixels, they can be manipulated in many ways and still have their shape be kept intact and sharp. Unfortunately, raster images – which are JPG, PNG, or GIF – cannot do that, which is why we need to optimize for Retina.
Retina in Email Design
While doubling the size of your images helps ensure that they display beautifully on retina screens, this technique is not without its drawbacks.
Mobile data plans can be expensive, and depending on your location and network connection, can be slow. As we increase the dimensions of an image, the file size increases, too. That increased size cuts into a subscriber’s data plan and can cause an email to load slowly.
So keep in mind that not every email design needs retina images. If you’re using a lot of images in your email, or images that are really large, using standard, non-retina images may help provide a better user experience since the images will be quicker to download and display.
Make a Spectacle of Your Site with Retina
In conclusion, the trend of manufacturers outfitting devices with high DPI displays makes the need for Retina images on websites, apps and email campaigns clear.
As long as you consider file sizes, including retina images is a relatively easy thing to implement on a new design or to upgrade an existing one, and put your best foot forward.