Retina Image Support

The newest iPhones, iPads, and Macbooks all sport “Retina” displays

“Retina” display is a trademarked term owned by Apple and relates to a special display type that Apple uses on a number of different devices.  Retina display was first introduced in the iPhone 4, and is now used across other Apple products like the iPad and Macbook Pro laptops.  A retina display has extremely small pixels and a much higher density of pixels per square inch, which can result in a display that is very sharp, and very clear.  (“Retina” is just the name used by Apple for their high density pixel display, other manufacturers and devices have their own proprietary high pixel density display types.  For ease of this tutorial, the term “retina” will be used interchangeably for any high pixel density display type, including Apple and others.)

With the release of ProPhoto 5, the ProPhoto theme began providing support for retina-sized image display on retina devices. Here we explain how retina devices work, how images are displayed on such devices, and items to take into consideration when sizing/uploading images for retina displays.

Two Kinds of Pixels

The pixels on a retina device are so small that if websites were rendered at their actual size, they would be too small to see clearly. So, for the purpose of simplifying using a retina device to view websites, Apple makes a little internal calculation behind the scenes: they put two of their tiny pixels together and call it one normal pixel. The tiny retina-sized pixels are called “device pixels” or “hardware pixels” and the normal pixels are technically called “reference pixels”, but we like to think of them as “normal pixels”.

iPhone normal versus device pixels

 

Retina Displays and Normal Image Resolution

What that means is that if you’re viewing a website on a retina device, a website that is 1000 pixels wide is rendered using 2000 device-pixels.  So, for example, if you upload a 900px by 600px image, on a retina display, it will actually use 1800 by 1200 device pixels of space on the screen.  Since there are not enough pixels of information in the image to take advantage of the double-density retina screen, the 900px by 600px image is stretched to fit over all of the tiny device pixels (1800 by 1200).  But again, it’s displayed at 900px by 600px.

Retina Pixel Comparison with Text Normally when you display an image using more screen pixels than the image has, the up-scaling causes a noticeable pixellated effect and significant loss of quality. The good news is that retina “device pixels” are so small (almost impossible to see individually with the naked eye) that even when an image is upscaled to be displayed over twice as many device pixels, any pixellation or loss of image quality is hardly noticeable.  Most viewers will never notice that the images aren’t actually making use of every device pixel.

How ProPhoto Uses Full Retina Resolution

Those that use retina devices frequently though may be able notice that loss of image quality when images are stretched to make use of the available device pixels on retina display.  Others may just want to make sure their images are as clear and sharp as possible on retina devices.  So ProPhoto has incorporated a way to show images that takes advantage of every device-pixel on a retina display. The trick is to give the retina device an image that is up to twice as large as necessary.

So again, using the example above, if the image is supposed to be displayed at 900px by 600px (in normal pixels), you can upload an image that is 1800px by 1200px but ProPhoto tells the browser to display it at 900 by 600 normal pixels. When this happens, a retina device will use all of the extra pixels in the twice-as-large image to show it at full resolution, making use of every one of the tiny retina device pixels. The result is that the images look even sharper than on a non-retina display.

In summary:

ProPhoto Retina-ized Image Summary

It should be mentioned that even if you upload an image that is less than twice-as-large, but larger than it’s display, say 1200px by 900px 0r 1400px by 933px using our example, the retina device will still make use of those additional pixels.  The more pixels the device gets, the sharper the display.  However, the display can only utilize up to twice the number of pixels vs. normal pixels (1800px by 1200px in the example).  Anything beyond double, the device can’t use.

Now to make your life a little easier, ProPhoto displays a “recommended image size” dialog box right within the post/page editor screen.  So if you want to upload/insert retina sized images into your posts and pages, you can simply use the “For retina displays” value to size your images accordingly.  No need to figure all the math out on your own!

ProPhoto Recommended Retina Size

 

Portrait Style Retina Images

If you do decide to upload retina-size images to your site, you may notice that your portrait/vertical style images appear much taller/wider than desired.  So ProPhoto offers an option to help in these instances.

Image Optimization for Retina Images

Obviously, if you decide to upload retina-sized images to your site, they are going to be larger than non-retina images in both dimensions and file size.  Because image file size greatly impacts a site load time, it is important to try and reduce the file size of your retina-sized images as much as you can, without sacrificing too much quality.

Retina Images and Non-Retina Displays

Now, if you do decide you want to upload retina-sized images to you site, to take advantage of the device pixels on a retina device, your next question is probably “so what gets shown on non-retina devices?”  On non-retina devices, ProPhoto will display a downsized version of your uploaded image, if you have the ProPhoto downsizing feature turned on under “ProPhoto” > “Customize” > “Site Settings” > “Misc.”.  (If turned off, the web browser will downsize the image on it’s own as the image loads.)

So back to our example, your image display is 900px by 600px, and you upload an 1800px by 1200px retina-sized image.  On non-retina devices, those extra pixels can’t be used in any way, so your original 1800px by 1200px image will get downsized to 900px by 600px and this downsized image is what is displayed.

As discussed here, when an image gets downsized, there can be some image quality loss as a result.  So to fully utilize a retina-sized images on a retina display, you may have to sacrifice a bit of quality on non-retina devices.  However, if you are able to use the built-in ImageMagick support feature in ProPhoto, your downsized images should show little to no quality loss.

Unfortunately at this time, there are no good options to serve different images to different displays.  That is, you can’t upload a retina-sized image for retina devices and a separate normal-sized image for non-retina devices and have each displayed accordingly.  As web standards and functionality emerges to make this a reality, ProPhoto will certainly try to incorporate as it can.  But for now, it’s not possible.

Actual Percentage of Retina Users

Like a lot of things on the web, or in the news/media, when something gets talked about with great regularity, it “feels” like something is bigger than it actually may be.  This tends to be the case with actual users of Retina devices viewing the web.

Quantifying the actual percentage of web viewers using Retina devices is a bit difficult to do, but almost all of the evidence available suggests such users are still in single digits, i.e. less than 10%.  So you may want to keep this in mind when deciding whether you want to display retina sized images on your site or not.  But, this number is definitely growing and nothing seems to indicate that it will stop growing.  It’s only getting more popular, which is why we included this functionality in ProPhoto.

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us