{"id":1092,"date":"2016-11-09T13:08:42","date_gmt":"2016-11-09T13:08:42","guid":{"rendered":"http:\/\/shortpixel.com/blog\/?p=1092"},"modified":"2017-08-01T13:49:54","modified_gmt":"2017-08-01T13:49:54","slug":"how-to-use-optimized-retina-images-on-your-wordpress-site-for-best-user-experience-on-apple-devices","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/how-to-use-optimized-retina-images-on-your-wordpress-site-for-best-user-experience-on-apple-devices\/","title":{"rendered":"How to use optimized Retina images on your WordPress site for top user experience on Apple devices"},"content":{"rendered":"
\"use
Retina Display Logo<\/figcaption><\/figure>\n

In this article I will show you how to use optimized Retina images on your website, in order to offer an amazing user experience on Apple devices.<\/p>\n

Retina is a special type of display present on Apple devices, having\u00a0a higher pixel density<\/strong><\/a> than usual displays. This display allows images to have an extremely\u00a0crisp look, as if they were printed, by using double\u00a0resolution images,<\/strong> instead of the usual resolution images for the same screen space.<\/p>\n

When an Apple product has a Retina Display<\/strong>, each user interface widget is doubled in width and height to compensate for the smaller pixels.\u00a0Apple calls this mode HiDPI mode<\/i>.<\/p>\n

What does this mean for your (WordPress) website?<\/strong><\/p>\n

If you don’t provide images with double resolution on your website, your images will look on a Retina display the same as they look on a lesser pixel density screen. Nothing gained, nothing lost.<\/p>\n

But if you provide these images, your website will look more shiny and crisp<\/strong> on these devices, thus being \u00a0more appealing to your visitors. This seems like the sensible alternative for a well maintained website, and for this you need to take a few simple steps.<\/p>\n

A plugin like WP Retina 2x<\/a>\u00a0automatically creates the Retina enhanced images for your WordPress website, storing them alongside your usual images – you can identify them in the uploads folder by their specific @2x<\/em> suffix – and takes care of displaying them when needed.<\/p>\n

There are some downsides, though. Retina images are double the pixels for each size, meaning they can be four times bigger<\/strong> in size which means they take more space on your hosting and, most important take more time to be downloaded<\/strong> to your visitors’ devices thus harming users’ experience with your site.<\/p>\n

In order to cope with this downside, optimizing your images is crucial<\/strong>. For this, you can use an image optimization plugin that also optimizes the Retina images, like our\u00a0ShortPixel Image Optimization plugin<\/a>.<\/p>\n

ShortPixel Image Optimizer features, starting with version 4.1, automatic Retina images optimization<\/strong>. if you activate the option present in the Advanced tab of the ShortPixel Settings. This means that the ShortPixel Image Optimization plugin, while optimizing images, will detect any existing\u00a0Retina specific (@2x<\/em>) images and optimize them too. Big images like the Retina specific images will benefit most of ShortPixel’s powerful adaptive algorithms<\/strong> so optimization rates of 80%<\/strong> are quite frequent.<\/p>\n

In conclusion, I strongly recommend to use optimized Retina images on your website as\u00a0it’s good for user experince and quite straightforward too. It boils down to this: install \u00a0the two plugins –\u00a0WP Retina 2x<\/a>\u00a0and\u00a0ShortPixel Image Optimizer<\/a>\u00a0– and\u00a0activate the Retina image optimization in the Advanced tab of the ShortPixel Settings. From then on,\u00a0the two plugins will do the job automatically\u00a0for you.<\/p>\n","protected":false},"excerpt":{"rendered":"

In this article I will show you how to use optimized Retina images on your website, in order to offer an amazing user experience on Apple devices. Retina is a special type of display present on Apple devices, having\u00a0a higher pixel density than usual displays. This display allows images to have an extremely\u00a0crisp look, as […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1092","post","type-post","status-publish","format-standard","hentry","category-world-of-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/1092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=1092"}],"version-history":[{"count":21,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/1092\/revisions"}],"predecessor-version":[{"id":2570,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/1092\/revisions\/2570"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=1092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=1092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=1092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}