How to Upgrade Website Images for Retina Displays

Do you have a business website? Does your company’s sales depend on it? Are your visitors on mobile or mac users? If any of those rings true then you probably have updated the website’s images ready for retina displays, haven’t you?

If that’s not true — meaning that your website is not retina-display ready — or worse that you’re still not sure what a retina display is — then read on.

Retina display illustration

What are Retina Displays

In informal terms, a retina display are high-resolution screens such that normal human eye cannot identify individual pixels on it when viewed from a distance. Typically this would be at least 300 Pixels Per Inch (PPI) on one foot viewing distance or 200 PPI at a distance of two feet (60 centimeters). There are formal definitions of this based on scientific research. But these informal definitions I’ve provided should be enough to cover the common cases.

Retina displays made its consumer debut in 2010 with the introduction of the iPhone 4 with a resolution of 326 PPI. On laptops, the debut was circa 2012 with the introduction of the 15 inch Retina Display MacBook Pro with a resolution of 216 PPI. Laptops are intended to be viewed at a longer distance than mobile phones, hence it can get away with a lower PPI figure yet still qualifies as “retina”.

However the truly first retina displays were the IBM T220/T221 line of computer monitors, sold between 2001 and 2005. These displays have a resolution of 3840×2400 pixels over 22.2 inch diagonal. That worked out to 204 PPI, much higher than most other monitors of the time which typically has resolutions around 100 pixels per inch. But priced at $8400 in 2003, there were few buyers of these displays.

Benefits of Retina Display

Really, no words can adequately depict how good retina displays are compared to non-retina ones. You really need to see it side-by side. One way to do this is just visit a nearby Apple Store. Since Apple still sells a non-retina MacBook Air but most of its laptop line up are retina displays, you can compare them side by side on the same store, same lighting conditions, and exactly the same software — maybe you can also play with them a bit to display the same exact content. But if you can’t find a good store nearby to compare them side-by-side, Art Authority has a comparison of retina displays vs regular one done via macro photography.

Generally retina displays make text looks like they were printed on laser printers and images looks like glossy photos. Text looks sharp, with no apparent fuzziness around rounded corners. Vector images looks as sharp as its text counterparts. As for photos — as long as there’s enough pixels in the image, it looks great. But if the photo has a resolution lower than the display, it’s going to look worse.

Have a look at the sample two images below at 100% zoom levels. If you are viewing from a retina display, the upper image will look blurry when compared to the one below it.  However if you are viewing these from a regular low-PPI display, both images will look identical.

Sample Artwork (non-retina)
Sample Line-Art Image (standard resolution).

 

Sample Artwork (Retina)
Sample Line-Art Image (retina display resolution).

Yes, a major downside of retina displays is that low-resolution line-art graphics tend to look blurry when shown on a retina display.  On a typical web page, non-retina images are upscaled prior to placement on a display and placed side-by-side with text that are already retina-quality. Thus the user’s eye would contrast the rounded edges of the graphic with the text around it and quickly see its jagged edges denoting lower resolution. Furthermore images upscaled this way could not take advantage of subpixel rendering, which can give the illusion that the display has more pixels that it really has. Without subpixel rendering, low-resolution images would appear to have even less resolution on retina displays.

If your website does not have these high-resolution images ready, users with retina displays would notice those blurry images and see your site as looking outdated. After all it has been six years since the introduction of the first retina display laptops — and almost all web-capable mobile phones right now have retina displays. If your website still isn’t supporting these displays, you’ll risk losing confidence of your visitors.

Supporting Retina Displays in a Website

Traditionally web standard assumes that displays has a fixed resolution of 72 PPI. Image dimensions in web pages are specified using pixel counts and sometimes font sizes are specified as pixels as well. If browsers rendered in retina displays would blindly follow these hard-coded pixel sizes, images in legacy websites would be rendered very small. Similarly websites specifying font sizes as pixels would be rendered at unreadably tiny sizes. However retina display computers would need to maintain compatibility with these non-retina aware websites. Indeed, after six years of the introduction of the first retina display laptop, there are still many websites that do not feature high-resolution images.

To preserve compatibility with legacy websites and applications, macOS internally performs pixel doubling. That is, for every one “logical” pixel, macOS draws four retina pixels for it — double the width and height. The operating system presents the resolution of a retina display as half the pixel width and height of the actual pixels. Since macOS uses floating-point numbers to specify coordinates in the screen, this enables retina-aware applications to make use of the higher resolution but still keep compatibility with legacy websites and applications. Text and vector graphics would be rendered in the higher-resolution coordinate system capable of addressing these quarter-pixels.

Retina pixels comparison

Thus when a website specifies an image area within a web page to be 100×100 pixels, macOS browsers would interpret this as “logical” pixels which would map to 200×200 retina display pixels. When the actual image gets loaded and it contains 100×100 pixels, macOS’ rendering engine would enlarge it to 200×200 pixels prior to rendering. However if the image file really is 200×200 pixels, it would display the image in its full resolution.

There are three common ways to support retina displays in web pages:

  • Specify width and height attributes in the img tag but the actual image file is twice the width and height as specified in the tag. This is the easiest method and should not break existing content management systems. However this means that users without retina displays would waste bandwidth downloading images that are larger than what their screens can show.
  • Use the srcset attribute in the img tag that points to distinct images each for each different display resolution that support. This entails keeping multiple versions of the same image in your server — using around three times the disk space in your web server (twice for the retina version and one more for the non-retina one). However this conserves your bandwidth quota as visitors without retina displays won’t be downloading the retina image versions. However this may not be compatible with your existing content management system.
  • Use CSS (cascading style-sheet) media queries to differentiate retina displays from normal low-resolution ones. This would require you to have control of your website’s CSS or have support from your content management system. As for disk space and bandwidth, this approach is similar to the srcset attribute approach — multiple versions of the same image resides in your web server, and browsers would download the version appropriate for the user’s display resolution.

Hopefully by now you have understood what are retina displays and the benefits of having high resolution images in your website. But what if you don’t have enough pixels to begin with? What if you don’t have higher-resolution versions of those images? What if you lost the original vector graphic versions and don’t have the luxury to re-draw them?

Relax, we’ve got you covered.

How to Increase Image Resolution for Retina Displays

Bigger Picture is our answer to “not having enough pixels” — it increases an image resolution in such a way to avoid blurry or blocky pixels. You can use Bigger Picture to upscale your existing web graphics for retina displays even when you don’t have the higher-resolution originals.

Most applications uses bicubic interpolation or Lanzcos’ algorithm to enlarge images. These algorithms — although functional and fast — tend to produce images that are blocky or blurry, because the additional pixels added to the image are obtained by some averaging method of the original pixels that are now spaced apart due to enlargement.

However Bigger Picture uses artificial intelligence to redraw your image. It was trained on thousands of pictures hence able to recognize textures and patterns in your image and then re-draw it. Think of using Bigger Picture like handing your picture to a street artist and asking her to re-draw it larger. The resulting image looks good and sharp — although there are no real information added to the image, just materializing imaginary pixels.

Comparison between Preview and BiggerPicture

Follow these steps to use Bigger Picture to upgrade your website’s images to be retina-ready:

    1. Download the image from your website.
    2. Note down the original size’s pixel width and height.
    3. Ensure that the corresponding web page containing the image specifies this width and height since we’re just going to replace the file with a retina display version.
    4. Open the image in Bigger Picture.
    5. In “Target Size” select the “Multiples” mode and specify “2x” as the target dimensions. The resulting pixel width and height should be shown just below the slider
    6. Choose the appropriate Style for the image.
      • For button glyphs or line-art drawings, choose the “Artwork” style.
      • For photographs or complex paintings select the “Photo” style.
    7. If the original image is a low-resolution JPEG, choose the appropriate noise reduction level. Otherwise leave the “Noise Reduction” level as “None”.
    8. Click the Export button or choose Save from the File menu.
    9. Upload the resulting image into your website exactly with the same name and in the same location as the original one.
    10. Re-load the resulting web page — empty your browser caches if necessary.
    11. The image should show as sharper in retina displays.
      • If the image came out too big, modify the HTML tag for the image and enforce a size that is the original image pixel’s height and width.
      • If the image still looks blurry but you have a retina display, please empty your web browser’ cache and reload the page again.

BiggerPicture usage steps-by-step

Note that Bigger Picture can open multiple files and process it all in one go. Hence steps 4..8 can be done once for a number of images.

That’s all for now. Hopefully this would provide enough information for you to upgrade your blog or website and start to provide high-resolution content.

Tags: , , , , , , ,