HiDPI or Retina ready websites have been the topic of many heated discussions, but do you know what it actually means? It’s a phrase coined by Apple to describe high pixel density displays; however, more and more displays nowadays pack so many pixels per square inch that it’s literally impossible to distinguish individual pixels with the naked eye. Some of the benefits of Retina ready websites are sharper images, more detailed design, brighter and more vivid colors, as well as readable and sharper fonts on mobile devices, just to name a few.
Let’s take Apple’s Retina MacBook Pro with a resolution of 2880 x 1800 pixels as an example. That’s a lot of pixels on 15 inches. Websites that haven’t been optimized for Retina displays will look pixelated and blurry; zoom in to 200% on your website or one of your images, and you’ll see just how bad the situation is. Considering the sheer number of devices already using HiDPI displays, creating a Retina ready website is no longer optional.
How To Make Your Website Retina Ready?
Making your website or a WordPress theme Retina ready is actually really simple. All you’re doing is adding an additional image and installing a script that decides whether to use a standard definition or Retina ready image. The Retina ready image is twice the size of the standard definition image; for example, if you have a 400×200 image called logo.png, you will have to create a 800×400 version in Photoshop or a similar program and save it as firstname.lastname@example.org and upload both files to the same folder.
If you use retina.js script, make sure to include it in your theme’s “js” directory and it will automatically replace every standard definition image with a Retina ready version if it exists on your server. Same applies to all of your buttons, icons and favicons as well. While it may sound like a hassle, what you’ll end up with is a Retina ready website that truly stands out for all the right reasons.
Possible Disadvantages Of Retina Ready Websites
The main disadvantage of Retina ready websites, apart from having to optimize every image on your website, is pretty obvious: Retina ready images with four times as many pixels can have up to four times the file size of the standard image, which can affect the loading speed of your website considerably. Take a look at your website’s metrics and see just how many visitors actually use HiDPI displays in order to determine if it’s something you need. Keep in mind that you can find HiDPI displays not only in Apple products, but also in Nexus, Samsung and many other devices, and it’s just a matter of time before all device manufacturers switch to HiDPI displays.