When the eyes of the world were on Cupertino on September 9th 2014 for the latest iPhone launch, one of the biggest ‘buzz’ announcements was all about the new and improved Retina HD screens that will be included with the iPhone 6 and the phablet-like iPhone 6 Plus – the former is a moderate resolution improvement over the iPhone 5S, and the latter is leaps and bounds ahead of anything that iPhone lovers would have seen before. A better resolution means a greater amount of pixels being visible on the screen, and this has the potential to create a headache for those who are responsible for creating images.
New screens with older content
To fully understand this concept, the re-release of the original Star Wars films on Blu-Ray is a great example, when those remastering the original HD content noticed that fixings and joins in the set were suddenly obvious on screen. These were never visible in standard definition on VHS and DVD! On an iPhone screen, an image that looked perfect on an iPhone 4 or 4S may suddenly look sub-standard when then latest iPhones start arriving.
Think ‘vectors’
As a general rule of thumb, images that are stored in pixel-related formats have the potential to become distorted when they are viewed on screens with higher and higher amounts of pixels crammed into them. BMP, JPG, TIFF, PNG and GIF files are all based on bitmap formats, and this means that when they are stretched out over a large pixel area there is the possibility of distortion – this is similar to inflating a printed balloon beyond the safe size and watching the words distort out of shape. If you are able to use a vector-based format like SVG or CSS, the files will remain clear when they are enlarged, and this is because of the mathematical information (vectors) that is contained within the file.
What if bitmap images are unavoidable on a website?
If there is no alternative to using bitmap-based file formats, you may wish to consider putting two versions of every image into a website – one for regular devices and one for Retina devices such as iPhones and iPads. By hosting both high-resolution and lower-resolution images, you can then install a server-side script such as ‘Retina-Image’ (this is available through GitHub) to automatically detect the best image to display for a particular device. There are other options available for detecting the best image to use, but anything that is not server-side may consume additional hosting bandwidth, and this in turn could increase costs and reduce the site’s performance.
How to get the ‘double up’ message across to people entering content
If you need to get the message across that all images need to be entered in both a regular and a ‘double’ resolution for Retina devices, you can always customise a CMS (content management system) to reject images that have a resolution that is too low for ‘doubling up’ successfully. This is an incredibly important message to emphasise, and everyone involved should bear in mind that the latest iPhones have an almost mind-boggling number of pixels in their screens. The iPhone 6 has a resolution of 1334 x 750, while the iPhone 6 Plus weighs in at 1920 x 1080 – this is the same format as 1080p HDTVs that are on the market!