From Webopedia, a Retina display is a marketing term developed by Apple to refer to devices and monitors that have a resolution and pixel density so high – roughly 300 or more pixels per inch – that a person is unable to discern the individual pixels at a normal viewing distance. Get more information here.

Providing an article image at 2X or 3X its original file size can provide a sharper experience, but at certain performance costs. There is no single solution with retina-friendly images — mainly, because browsers have not implemented the features necessary to provide one, especially if you are still supporting older browsers such as IE9 and below.

The good news is that there are specific solutions and best practices — when followed — that can still provide a balanced experience across devices. We recommend the following guidelines to achieve this result:

Your logo

Your logo is the first recognizable image users will see when they visit your website. We recommend using a 3X-sized logo, so that it remains crisp and clear. Images with text are affected most by a Retina display, so we present the full logo here. Of course, when we say “3X-sized” we don’t mean that size on the page; instead the image source is that large, and we scale it to its normal size on the page.

Example: The final logo needs to appear on the page as 220px by 77px. The source image would be 660px by 231px. When creating images don’t be concerned with the DPI (Dots Per Square Inch) setting. It will not affect the final image quality.

Icons and other design artifacts

Whenever an icon is presented it should be clear to the user what the icon is indicating. We have found the best way to present icons in development is as a font icon library or SVG with PNG fallback. If neither of those are available, a 3X-sized PNG of the icon is preferred. Using our font icon library is recommended because that will minimize any additional assets affecting page-load speeds.

We use the font library Font Awesome. Using a single font library keeps the weight of the font download size to a minimum. Learn more here: https://fortawesome.github.io/Font-Awesome/

Background textures and images are typically avoided in the overall design, and providing a flat or modern designed site performs best with regards to page load.

Editorial images

The images in your article content do not necessarily require a 2X or 3X size. You won’t notice much of a difference with most images, unless the image contains text or fine edges. Requiring such a largely scaled image — as a featured image for example — to be downloaded by the user is not needed.

We typically start in the article with a full featured image at normal dimensions and scale that size down for tablet and mobile. As the image is scaled in the browser, the source is still the full size up to 3X, resulting in a better image quality for that Retina display. The device is still downloading the larger image, but required to maintain the quality across devices.

We will sometimes use this larger image or a large thumbnail image size on other pages, where it is being displayed at a smaller size than the source, but again this is to maintain that Retina-friendly quality. This means desktop users will be downloading a larger image size, but we are even seeing more Retina displays for desktop/laptop devices.

If you have any questions about what is specifically working on your site, use your browser and view the information about an image.

For Google Chrome, go to the page on your site that shows an image you wish to check for Retina displays. You may have to install a Chrome Extension that allows you to see this information. Below is the one used by some on ePubishing’s team:

https://chrome.google.com/webstore/detail/view-image-info-propertie/jldjjifbpipdmligefcogandjojpdagn

1. Right-click on the image to open the menu

2. Select "View Image Info" or the related command your chosen Chrome extension uses.

3. View the original size of the image and the scaled size.

Firefox / Internet Explorer / Safari all have similar image property inspection functionality built into the browsers. For example, in Firefox, select "View Image Info" after right-clicking an image.

There are many other technical aspects of this we did not cover here, but our experienced developers and designers continue to optimize best practices to provide the best user experience and page-load optimization.