By Allan Berger
Making your website ready for Retina display doesn’t have to be a hassle. Whether you are building a new website or upgrading an existing one, this guide is designed to help you get the job done smoothly.
Make it Retina First
The easiest and most time-saving way to add Retina support is to create one image that is optimized for Retina devices, and serve it to non-Retina devices as well.
By now, every modern browser uses bicubic resampling and does a great job with downsampling images. Here’s a comparison of downsampling in Photoshop vs. Google Chrome, using an image from our Growth Engineering 101 website.
There are two ways to let the browser downsample images for you:
img tags or CSS background images.
You can have
img tags serve the Retina-optimized image, and set the width and height attributes to half of the resolution of the actual image (e.g. 400