Retina images

Visitors appreciate high-quality images, but larger files can slow a website and affect search performance. How do we balance quality and speed?

What are Retina images?

“Retina” is a marketing term introduced by Apple for high-density displays. For website images, it means supplying enough resolution to look sharp on those screens.

Computer screens have grown in size and quality, alongside modern mobile devices and televisions. Resolution describes the number of picture elements. Around twenty years ago, an 800 × 600 display was common: 480,000 pixels, each showing a colour. Enlarging a 400 × 300 photo to fill it uses four display pixels for each image pixel. Showing a 1,600 × 1,200 image at 800 × 600 reduces it in both dimensions.

Modern displays may have thousands of pixels across, while photographs can be larger still. High-density screens fit more physical pixels into each logical display unit. A screen behaving like a 3,000-pixel-wide display can, for example, use 6,000 physical pixels across. Supplying a higher-resolution image makes the result sharper.

Here is the same icon on a standard screen and a Retina screen, in this example an iPhone 4, the generation that introduced Retina to the iPhone:

Using them on a website

Retina displays need larger image sources. For the roughly 1,000-pixel-wide layouts discussed in this article, an image around 2,000 pixels wide can provide a sharp result at double density. Read more about Retina display resolutions.

For a full-width website image, use a source at least 2,000 pixels wide where appropriate. To allow for larger screens and future developments, our recommendation in this guide is a source around 3,200 pixels wide.

Website speed

Sending every visitor the largest file would hurt loading speed. BigBase websites can instead deliver an image suited to the screen and connection:

• A phone receives a smaller version matching its display.
• A Retina screen receives the quality appropriate to its size and density.
• A large, high-density screen can use the original large image.
• A visitor on a large screen with a slow connection, such as poor airport Wi-Fi, can receive a smaller version so the page remains quick to display.
• Search engines can see the available image sizes, helping them understand both the page’s quality and its efficient delivery.

How do I enable this?

Contact us so we can assess whether it makes sense for your website. To make the most of it, you can replace existing images with higher-resolution sources. Keep server storage in mind: a large image collection may require more space.

This functionality is available from Base4 version 4.3.13. Support is often included in your subscription. Contact us for help and further explanation.