Image Comparison for Retina Displays

On a standard resolution display, the images below will be identical. But if you have a Retina display handy -- a third or fourth generation iPad, or a Retina Macbook Pro -- then you should be able to see a marked difference between the two images.

The first image will be softer, while the second will be sharp.

This post demonstrates the theme's ability to dynamically load higher resolution images when available, and when appropriate. Both image renditions originate from a single upload of a single, "full-size" image.

For the first image, the replacement has been disabled by manually removing the "hd-full" class which is applied to all images by default, in accordance with my Theme Options. By manually removing this class, it is possible to manage image replacement on an image-by-image basis.

Standard resolution image.

Standard resolution image.

Standard resolution image.

High resolution image.

By handling all of your images in the same way as this second image, TTG CE3 Theme for WordPress helps to ensure that your images always look fantastic on Retina and HiDPI displays.


Comments are closed.