How to Ensure Your Website’s Images Look Great on Retina Displays
Now why would retina display matter? Ask a lot of people unfamiliar with apple devices but successfully running websites. And what on earth is a retina display anyway? So let’s try to find the technical underpinnings of this technology and why you need retina friendly images on your website.
A high pixel density screen is marketed by apple as “retina”. Usually while LCD in standard monitors is around 100 ppi (standard 22 inches FHD), retina devices have pixel density of 218 to 264 pixels per inch. So it actually packs 4 times more pixels in the same space. For example 400X300=12000, vs 800X600=48000. 48000/12000=4 times. This effectively makes the use of additional pixels to make the image look smoother. To achieve this, The elements are scaled to retina resolution as they natively would look too small in such dense pixel packing.
So the problem is when regular images (that look great on regular screens) are scaled up to retina displays, they look botchy and blurry, as if of low quality. While the screen elements and web elements like text are scalable and look neat, your images end up looking bad, giving a really bad impression to the reader about your brand and site. So in order to fix that, there are several ways and we talk about them below:
The best method I realised after deploying a few websites:Use regular images for non retina displays and double image sizes for Retina displays.
1. You could feed regular images from your existing library while creating a new library for retina. Alternatively you can have a high resolution retina version from which a plugin will derive a regular web version of your images. If you have wordpress, you can use a plugin, just search the plugins library for “retina” and choose a plugin with reliable ratings and votes/reviews of your choice. Give it a spin and try another if you have to. For other CMS there are plugins too.
2. Manually feeding the site with 2 types of images will requite coding which i will not go into detail here [ Not that i am qualified :-) ] and you will need to maintain 2 folders manually for both resolution. Not really a practical process for simple webmasters.
3. Some themes come as retina ready. Here you can easily manage the folders for image storage, both for retina and regular web. It’s a great option as other elements and scaling is already taken care of. Things like retina ready fonts and retina compatible touch ability, orientation scaling etc is also taken care of. So in my opinion it’s the best option to go with.
Exporting images: I personally advice you to export optimise images from photoshop> Save for the web option before you feed it to your site. This reduces the size and optimises the images. If you have a lot of images then you can use a plugin for wordpress to optimise images. But optimising beforehand is not a bad idea at all, especially when the theme will store 2 versions of it.
Advice against: using lossy oversizing techniques as the images will look worse. It is worse than using non retina images in the first place. So stay away from stretching images from a low resolution, you might rather leave it as it is.
Hope you found this blog helpful, Thank you for reading!
Nature and Wildlife Photography