26 April 2017

Aren't you using retina images already?

With the advent of higher resolution devices increasing every day and the need for the end users to getting used to seeing high-res images, anything that is default or standard definition looks inferior if not ugly. As a developer, it is a must to consider this design impact and how to accommodate and give a seamless experience to the end user across various types of devices. I am going to quickly touch base on how to understand what High Dpi devices are how to exploit all those pixels available in a device real estate.

DPI stands for Dot Per Inch. I am a 90s kid (don't know if that is proud statement or a something to be trolled about), one of the highest resolution I use to see was 1024 x 768 - almost square sized monitors. It simply means that many pixels available and that many colors one could see in screen irrespective of the size of the screen. Take a look at a simple example below. If you closely observe, we are trying to draw a circle in various devices with different pixel densities. If you see on the far left assuming 1 pixel = 1 unit we won't get that much of a resolution as each slot of rectangle can show just one color at a time. If we can increase the density by 4x (or twice in area), the resolution becomes better and if its 9x (thrice in area), it will show a better curve.

The current HD Televisions are having 1920x1080 pixels and if you observe it very close literally, you should be able to decipher the pixels. But viewed at a particular distance, the human brain will not be able to separate that out. However, in small devices like phone where the proximity is more, it is vital that every developer understand this basic concept in order to give high-res content.

For the web

Before we dive into how to optimize rasterized images for the web, if there is an option available to go with Vector Graphics (example .svg), always go for it, it should be a no-brainer. They are relatively lesser in size and come ready made to be rendered across any kinds of devices. However, practically this is not always the case.

Rendering high pixels for the web should be easier. For demonstration purposes, let me take Pramati Logo as an example. Following are two versions of the same image rendered differently. If you see this image on HD monitor, you will call it both look alike. However I would urge you to look in a high resolution device like an Apple iPhone or a Retina enabled Macbook or any high DPI device, you will clearly see a stark difference between these two.

To put in "lay-dev" terms, the image on the bottom is not retina ready whereas the top one is. For the stubborn folks like me, who won't take the time to see it on a retina device, I am attaching a screenshot (deliberately enlarged) captured from an Apple iPhone below.

As you can see, it is pretty clear there is a significant difference in the edges and the symbol.

The trick

The technique is very simple - you have to use an image four times larger its size and use css explicitly to set the width to the initial or base size. For example, if you want to render an image in an area of 400x150, you need to get your image four times larger than this (or twice larger in the sides). So, you should use an image of dimension 800x300 and set the resulting width to 400px. This would ensure that it renders with the maximum pixels in a Retina device.

Whenever you are developing this for web, you are going to test it in most of the common browsers where CSS3 standards have become a norm in order to guarantee a consistent experience. However, when you are developing for email clients (especially the bloody outlooks), I would urge you to consider and craft every minute thing. With lots and lots of emails consumed in mobile devices these days, heading towards Retina images is a no-brainer. However, almost all the emails I see and consume are ignoring this main fact and are not retina friendly. Even a lot of famous companies ignore this trivial design difference and send image as-is.

I've already written an article on the tools and techniques required to develop rich and responsive emails for different emails clients which is a short read. And don't forget to use Litmus - they have clearly monopolised the Email testing market!

Maximum compression
I am a huge fan of PNG images because of their size, transparency and supreme compression it offers. If you are not going to link the pictures directly with the email, compressing a PNG can save a lot of file size especially when they made as attachments and referred in the final email.

I use a tool called as ImageAlpha which is phenomenal when it comes to compressing images with transparency. For PNG, the number of predefined colors can be reduced to 32 or 64 depending on the color usage your picture has and voila, you can achieve compression as high as 80%! It is 100% free as well!

I often say that Design nuances and intricacies are not just for "designers". Any "Engineer" should be able to understand why we do what we do and then dig on the how we do part to become proficient thus increasing your productivity and your edge multi-folds.

Hope you were able to learn something today.



bibwild said...

I don't think "scalar image" is a thing. Vector images are usually contrasted to "bitmap images".

bragadeesh said...

@bibwild, you are right in both the cases. My intent was to distinguish between rasterized and scalable images. I will correct those terms now. Thanks for taking the time to comment!