As the number of requests for mobile/responsive sites continues to rise, I have also noticed a significant increase in the number of requests for sites designed for maximum compatibility with the new desktop and mobile Apple devices that have the Retina Display (MacBook, iPad, iPhone5, etc.). Providing maximum support for the extreme High Definition of the retina screens means that all of the site's images must be added to the page in such a way as they will display in the super-HD quality supported by the retina display, and in normal HD quality on other displays. In order for this to happen, images must be saved as the highest possible quality .PNGs that are double their desired size, and then sized down to normal, using CSS.
Note that while this article focuses on mobile devices with the Retina Display, providing maximum quality for Retina Displays on desktop is actually achieved by the same technique as on mobile, and does not require any separate styles or adjustments to be made. In other words, if you provide it for one, you provide it for both :)
Background - Retina vs. Standard
What is Retina?
Ever since the release of the iPhone5 and iPad3, Apple has been integrating their Retina displays into their mobile devices, giving them the ability to display images in a superior definition as compared to any other type of display on the market. The retina display is essentially an extremely high resolution display, having 4x the amount of pixels per square inch. As a result, Retina screens have the ability to display images in a significantly higher density than do standard screens. Note that the term "standard", as it is used here, describes all non-Retina displays, including those that are High Definition
The image below illustrates the difference between the screen resolution of a device with a Retina display versus that of a device with a standard display.
Notice how there is a 2:1 relationship between the number of pixels in each direction on a Retina display vs. the number of pixels in each direction on a standard display per square inch. This relationship means that the width and height of each Retina pixel are half the height and width of each standard pixel. Thus, images that are designed for Retina screens will display in normal quality on a Retina monitor and in half the normal quality on a standard monitor.
This does not mean that the images will be poor quality on a standard monitor; monitors do their best to display images in the highest possible resolution. For example, if an image is given with four times the density that the monitor is able to display, the monitor will display the same image in half of the original quality, by using one quarter of the number of pixels (each being 4 times the size of the original pixel) used in the original. In fact, an image that displays the a Retina's HD quality will display in the best possible definition of any image on a standard monitor.
Browsers vs Monitors
As web developers, we use pixels as a standardized unit of measurement in a web browser. In truth, pixel units given to a web browse from CSS may actually have a different size than do pixel units given to the monitor from the device. This is not a new thing that Apple added when they created the retina display; it is the same technology that is used by devices for displaying all images in and out of a web browser.
Due to the fact that not everyone uses the same resolution monitor with their computer, the number of pixels given to the browser in CSS is actually converted into the appropriate number of pixels by the device before the data is sent to the monitor. This way, a web developer can set an element to be 10px wide, and it will display the same in on a screen with one resolution as it will on a screen with a different resolution (though not necessarily in as high a density on the lower definition screen).
This works via the following method: The device gets the image's data and sees that the number of pixels in the image is too high compared to the image's original size (i.e. the pixels are smaller in the original image than the minimum size of the pixels on the monitor). Next, instead of increasing the size of the image (to make the size of the pixels in the original image fit the minimum pixel size of the monitor), the monitor maintains the original size of the image and displays it by breaking the image's pixels into squares of the same size as the monitor's minimum pixel size and then creates a new pixel for each square by averaging the colors of the original pixels that comprised said square.
For example, if an image is made for the maximum HD quality on a Retina monitor and is now being displayed on a standard HD monitor the image's pixels are one quarter the size of the standard monitor's pixels. In order to display the image, the standard monitor creates a new, displayable version of the image via the following:
- The original image's pixels are divided up into 2x2 squares, i.e. 4 pixels per square
- The colors of the 4 pixels in each square are averaged
- The averaged color is used as the color of a new pixel
- Each square is replaced with the new pixel, in order to form the new image
Note that in the above, each 2x2 square is equal to the size of one of the standard monitor's pixels.
Think of...Air Tanks...
The resolution concept can be a bit confusing, so, if you are having trouble wrapping your mind around it, try thinking of an image displayed on a standard monitor as a regular air tank and an image displayed on a Retina monitor as a high-capacity air tank. Assume that the two tanks (images) have the same dimensions (height, width and depth), but the regular air tank (standard monitor) holds x amount of air, and the high capacity air tank (Retina monitor) holds x2 amount of air. If you think of the air as pixels, then you now have two images (the air tanks) of the same size, but one that is made up of x number of pixels (standard; regular tank) and another that is made up of x2 number of pixels (Retina; high-capacity tank).
Why Only Retina Displays?
It does seem a little weird that we only need to accommodate the quality Retina displays and not other displays, doesn't it? Actually, we could do this for all displays, but would likely not be able to notice any difference, were we to initially save the image as the highest possible quality .PNG, as the image quality would already be at the maximum resolution of the monitor. Retina displays are so high definition, however, that in order to take full advantage of their display density, we need to add the images to the page in a special way.
As previously stated, in order to take accommodate the ultra-high definition of the Retina displays, images must be saved in the highest possible quality .PNG at double their desired size on the page (i.e. the image's native size must be double the image's desired size). When the image is added to the page, its dimensions may be adjusted, via CSS, to scale the image down to the desired size. Note that using the transform property will distort the image and will reverse the solution. Instead, the height and width properties should be used.
Note that when adjusting the height of the image, you will need to explicitly set the image's height and/or width properties in pixel values; you cannot use percentages. This is because setting the dimensions in percentages sets the size relative to the size of the image's parent element.
Integrating with Sitecore
Sadly, FieldRenderer parameters cannot be used with this solution, as they will cause the images to be served up with the given dimensions (i.e., they will be pre-adjusted, and the original size and density will be lost). Make sure that you do not use these or other inline attributes to set the size of the images
More Information (Links)
The following blog posts are great resources for further information and clarification on this issue and its solution. I highly recommend the first one for more technical details and alternative solutions.