Compare the following two images.

The problem is that either image may look better or worse depending on the browser and the display device.

Enlarge the view e.g. in Chrome with Ctrl-+, reset with Ctrl-0. The first image is a 600 times 600 pixel image, which is reduced to 200 times 200 with a width attribute. This is done inside your browser. The second image has been reduced by Euler with anti-aliasing.

In Chrome both will look approximately the same with the first one a little bit better. Chrome reduces images very well. In any other browser, the first one will look ugly, since these browsers use a very simple algorithm to reduce images. If you enlarge the view in these browsers, you see that the first one is actually the image with the higher resolution.

It gets worse on high resolution displays, like the newer tablets. To keep things from getting too tiny, these devices blow up any image. Usually the user does not notice. But looking closely, one notices that the images are not of optimal quality, e.g. compared to the quality of text or graphical elements. This is especially true, if the web page is printed. On print, we expect a high resolution.

So what is the correct way to get out of this dilemma? Using a large scale image and a smaller display width does not work on most browsers, and it wastes bandwidth. Using a small image does not display well on prints and high resolution displays.

A new proposal is the srcset attribute for the img tag. The attribute contains other images and their scaling relative to the img source, as in srcset=“file-hd.png 3x“. This is currently not supported by the main browsers. I wonder how long it may take to support this.

Another idea is a vector format. The one format supported by most browsers is SVG. However, for detailed graphics it takes a lot of bandwidth. And for photographic images this solution is not available.

Another idea would be a TIFF container containing various images. But TIFF is not supported at all. And this would waste bandwidth too.

Let me finish with my Ceterum Censeo: Scaling may be a good answer to resolution problems. But is is no good answer for display sizes. Any graphics must be designed with a specific display size in mind. Fonts, line width, markers etc. need to be adjusted to that precise size. You simply cannot use an A2 poster for a 5cm image in a print.