Have you wondered how to make your images look stunningly cool at your websites? Ever faced a situation when your site doesn’t look so cool when viewing in devices that have Retina display?With the advent of technologies, there have been massive changes in ways technology serves people and the phrase “retina ready” is a burning topic among designers around the globe. Before delving deep to know what is Retina Ready technology, it’s important to understand why this technology came into existence. Images play a pivotal role when it comes to web designing or when you are willing to convey a message to your audience through your blogs. Images are a powerful tool to convey messages in a much attractive manner as well as being concise in nature. Thus, such technology came into existence to enhance the visual experience of images even at low bandwidth.

This technology actually involves a higher resolution DPI screen and the functionality behind is that Retina devices will display everything at twice the actual size. For instance, a background image with 600x300px in normal display will display properly at 1200*600px. So all you need to do is create a higher resolution of images that you are using for your background image or images for your blog or content. You need not worry about texts as they would work fine on any devices. Now, the question is why double the resolution? If you open a site in Ipad or Macbook Pro, with a resolution of 2048*1536, taking into consideration the device size being 9.7 inches, you will see that your native resolution image will appear only at a part of the screen with a huge area empty. Thus, the easy solution being doubling the native resolution. However, not all devices are retina ready and hence we need to be selective as to showcase the different resolution of images at respective devices. Hence, the usage of a javascript known as retina.js.

As a designer at Grmtech, I work on the open source software Gimp. I recently did my part of experimentation, by creating a graphics of two different resolutions. If you are working with images that are free to use commercially, then you must look for higher resolution images and then create another version which is half the pixels of that image. After I created both the native resolution and higher resolution images, I delivered both the images to our Tech guy and my pal Sanjay Saha to execute the remaining part where javascript is involved. For those, who are working on WordPress 3.5, it’s a relief that they have provided a built in retina support.

Have you created a retina ready site? Feel free to share your experience.