Is the quality of a specially reduced picture a self-deception?

Question

css

There is an image 400x400 px. I reduce to 200x200, save in maximum quality. The resulting image looks worse than the original (400x400) image with width=200px added.
I somehow save incorrectly in 200x200, is this self-deception or a panacea for small images?

Answer 1

Depends on how you reduce the image and in what.
Probably the browser has better filtering.
What is the image format? jpeg?

Answer 2

Try to reduce in steps (first to 350x350, then to 300x300, etc.). The fact is that with a decrease, distortions inevitably appear, because. bitmap image. If you reduce step by step, the amount of distortion can be minimized (due to the image scaling algorithm, and the smaller the step, the better the reduced version will be in the end). And in the browser, the rendering engine (in the first case, when the image is 400x400) works with an unreduced image, which ensures higher quality.
PS There are also specialized programs for reducing images

Answer 3

When you write width=200px you are simply setting the style for the element. Naturally, the browser will not load a smaller image, because it does not know anything about what is on the "other end". He makes a request, loads data. And it will naturally load a picture, 400x400 in size. The browser then applies the style, i.e. reduces the img element according to the given rules, filling this element with your picture. Thus, it loads the original, and then changes it on the fly during rendering.
When you resize a picture in a graphics editor, you want permanent changes to the picture itself. Naturally, its quality will also change. And the browser will load from the server the image is no longer 400x400, but 200x200.

Answer 4

Judging by the tag, we are talking about saving from Photoshop.
Try increasing the image quality when saving.
If 400*400 was in 60, then for 200*200 try 80.

Answer 5

What screen are you looking at? It also depends on the dpi of your screen. For example, on retina-display you will notice a very strong difference with the naked eye. A 400x400 image is scaled down by your browser to fit a 200x200 style, but then stretched to fit screen pixels based on dpi. And on retna-display it will stretch exactly 2 times just under 400x400 screen pixels.

Answer 6

Show an example. Almost nothing can be said blindly.

Answer 7

Simple theory: the picture has 400 pixels in width and height. The browser takes this picture and pushes it into the 200x200 box, stupidly throwing out half the pixels when rendering. Hence the loss of details, stairs, moiré.
When zoomed in, the picture is reversed - the browser adds the missing number of pixels with an average color, which certainly leads to soap.
In Photoshop, you can mitigate the deterioration in quality if you resize not immediately to 100%, but in several steps, 15 percent
each. Resizer programs use various resizing algorithms, which allows you to reduce image degradation (and they will be in any case).