Wednesday, 3 February 2016

Why is Retina important in Responsive Web Design?

The answer to this question is actually very simple: a lot of newest mobile Apple devices have Retina displays (and the new upcoming ones will too) therefore when creating a responsive website you also need to accommodate Retina images into them for the best display. The best display also means the best experience.

How to create Retina ready images in Responsive Web Design?

There are various tool and methods out there. I will discuss only a few mostly because they best accommodate the responsive aspect of this problem.
I am sure you are familiar with SVG image format. Shame if you are not…! But let’s recap anyhow. SVG is an image format for vector graphics that allows those vectors to scale up or down in size without losing their shape. Because vectors are composed of a fixed shape instead of pixels, they can be manipulated in many ways and still have their shape be kept intact and sharp.  Unfortunately, raster images – which are JPG, PNG, or GIF – cannot do that.
Because of the unique ability to re-size flawlessly, SVG is a great format to use in Responsive Web Design. No matter the screen size, the image will re size accordingly and look great on any phone, tablet or monitor. This is also true for Retina displays as the SVG image will resize for the pixel density and stay the same shape. You should always use a SVG if you can as it will solve this dilemma for you.

Photographs and Raster Images

I understand that not all images can be a SVG format especially if they are a photo or are already a raster image. There is a possible solution to this issue which is to use image at twice its desired size and display it at 50% of those dimensions. What I mean is that if you have a photo in a website that is 150px wide by 150px tall, use an image that is actually 300px x 300px in size but still display it at 150px x 150px. This way, on a Retina Display the image will show nice and sharp.
There are many ways to have 2x images implemented into your website via HTML, CSS or JS. I will not go into detail about them here but I will show you just the basic methods.
First, if you have an image that is the size of 300px x 300px, in your HTML you can simply declare the height and width of the image to be 150px.
<img src="myIMG.png" height="150" width="150">
Additionally, you can change an image’s width and height in CSS by either declaring the image to be 50% of its size or literally defining for it to be half if you know what half is.
      width: 50%;
      height: 50%;
.box img{
      width: 150px;
      height: 150px;

Lastly, if the image you want to downsize is a background, this is the code to do the trick:
      background-image: url(myIMG.png);
      background-size: 150px 150px;

There is a big downside with this method. First, you cannot have a double sized image unless you have access to a bigger image. Obviously, blowing one up and using it isn’t the way to go at all! Additionally, if your website had many images or even some images that are just big in size, the load time can be greatly affected by having to load these now giant file. This is an especially big bummer as many mobile devices use crappy connections whether it is a low Wi-Fi bandwidth or low or slow cell phone service.
But there are ways to fix it too.