So what is the Retina?
The Retina is an Apple marketing term for which there’s no concrete definition. Put simply, the Retina display is any screen Apple has decided to call that.
It’s actually just a marketing term. It simply means that the screen has sufficient pixel density and when you look at it normally, you can’t make out all the individual pixels. The images have an extremely crisp look as if they were printed. This is achieved by using double-resolution images instead of the usual size images for the same screen space.
Retina image on your website
Modern browsers support Retina screens and are able to serve different assets depending on the device screen density. Basically, you need to know that everything except images are rendered in retina resolution automatically. If your site relies heavily on CSS effects such as gradients, box-shadows, and borders you don’t need to optimize too much at all, apart from the images. To prepare images for Retina screen provide images with the double resolution on your website. Your images will look on a Retina display will look more shiny and crisp. See the example below:
How to create and optimize Retina images?
If you built your website with WordPress it’s easy! There are a lot of plugins which can generate double size image and adapt them to use in your website. For example, a plugin like WP Retina 2x automatically creates the Retina images and storing them alongside your usual images. New images can be identified by their specific @2x suffix. For example image name [email protected]
Don’t forget that created double size images are also bigger and take more space on your hosting. The most important thing is that it also takes more time to be downloaded for users who are visiting your website.
That’s why we thought about this problem and added new functionality to our WordPress Image optimization plugin. This feature is not active by default and if you are using Retina images on your website we suggest to activate it on the CheetahO Settings page. CheetahO Image Optimization plugin will detect any existing Retina specific (@2x) images and optimize them too. The optimized image weight can be smaller up to 70%.
In conclusion, we recommend using Retina (double size) images on your website. It’s good for user experience and does not forget to optimize these images.