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: