by Artem Syzonenko

??????? ?????? ??? ??????????

We didn’t have any problems with image sharpness in the early years of the internet, because we didn’t need to show websites on mobile devices.

Today we see a tremendous growth in mobile web surfing. So much so that, this year, it has even overtaken traffic on desktops.

Most clients try to create responsive interfaces for their websites so they are easily accessible from any kind of device. And it doesn’t seem strange that many layout developers have started to use

img {    width: 100%;    height: auto;}

for their images. So they seamlessly work across any browser window resolution, scaling to the available space.

Conceptually, everything looks good. Designers create nice big images, and developers use those images for every device. In some cases, developers create multiple versions of the same image, so a smaller image is downloaded for mobile screens, and a bigger image for desktops.

Unfortunately, Chrome doesn’t want to resize images in the way that good image editors do. Instead, it out-puts the image with not the same, or similar, sharpness as the initial image.

The main reason for this may be performance. When a webpage has many images, and the device processor is not highly productive, additional image processing could lead to bigger lags in page rendering, so Chrome omit this process as not being crucial for end users.

I will show you some examples using Chrome browser, and then using other browsers. Here is an image, downsized to 1000 px in Photoshop:

The same image uploaded in original size and downscaled by the browser. Compare the sharpness of the dog’s eyes.

Photoshop:

Browser:

Things get even worse when you add sharpness in Photoshop after downsizing. But photos are more forgiving in this case, as they typically don’t have many sharp edges. Issues with any vector illustrations saved as .png images are much more noticeable. Frequent case — website logos.

Asana’s logo, initial file:

Resized in Photoshop:

Rendered in browser:

Wecan’s logo, initial file:

Resized in Photoshop:

Rendered in browser:

And couple of additional browser-rendered logos:

I found the most amusing comparisons of blurred images on UX-related websites. Smashingmagazine Jobs section, in browser:

In Photoshop:

Nielsen Norman Group, Empathy Mapping article, rendered graph:

Using Photoshop resizing:

I must admit that this problem is Chrome-only. IE renders much better; it is noticeable that some thin lines are pixelated, which is fine for text:

Firefox has good rendering as well; smoothing makes text a little less readable than in IE, but is better for logos:

What developers should do right now is to turn on webkit auto-sharping property:

img {    image-rendering: -webkit-optimize-contrast;}

This is what we would get if it was turned on:

So, before the most popular browser in the world implements a good image down-sampling algorithm, we can use webkit-optimize-contrast property, which allows visitors to our sites to enjoy our photos, discern item details in our online shop, and appreciate readability of our screenshots and diagrams. But be careful, in some cases it can lead to pixelated results.