New, Hi-Res Imagery

Long story short – Locusic now has new, crisper, sparkly graphics – specifically for newer hi-res displays on smartphones, tablets, etc. (Check the Before and After images below.)

This affects the web app and Android app.

Before

Before

 

 

 

After

After

For the last few years, mobile devices have been coming out with higher and higher resolutions. Their higher pixel densities mean that websites and other graphics are scaled up to use more than the number of pixels specified in the design (css) – in order to fill the appropriate (designed) amount of the screen.

There’s a good article about the details of some of this here.

In the old days, a pixel in a website’s design represented a single pixel in the display it was rendered on. Now with device pixels getting smaller and smaller in high-resolution displays, that would mean the website, graphics, and text would appear way too small. So the newer devices scale up the display of websites so that they actually use more pixels than they were designed for.

Let’s say you had an image that was 96 pixels wide. On a laptop, that might display as about one inch wide. While on a smartphone, 96 pixels might only be 1/2 inch wide or less. So the device scales the image up so it takes up the amount of space the designer originally intended.

If the device has a pixel density (the ratio of the density of the pixels on the device’s screen compared to a “standard” screen) of 2, it would use twice as many pixels to display the image.

The problem now is that the device is using 192 pixels of width to display an image that only has 96 pixels worth of image data. The result is that the image looks blurry, or like it’s a low-resolution image.

And that example is just for a device with a pixel ratio of 2 – the pixel ratio of Apple’s “retina” displays – in use since the iPhone 4. Other devices have even higher pixel ratios. My current smartphone, an LG G3, for example has a pixel ratio of 4.

The solution is to create images with higher resolutions and use those in place of the original graphics. Then the design needs to be updated to make sure you tell it to display the new 192 pixel image in a space that’s only 96 pixels wide, for example. Then the device (with a pixel ratio of 2) will scale it up to its natural size of 192 pixels – and it will look beautiful!

Of course there are a lot of technical details I’m not getting into in this article – like telling the design to only download the hi-res imagery if the display will actually take advantage of them – to save bandwidth for lo-res displays.

We did a lot of this kind of work recently and love the results. What do you think?

Before

Before

 

 

 

After

After

This entry was posted in Features and tagged , , . Bookmark the permalink.

Comments are closed.