Why does image quality deteriorate?

Question

css

Good evening.

The first time I encountered the fact that the images are displayed terribly on the site.

For example, if a 60 by 60 pixel image looks fine. But, if you set the width of the block to 50 pixels, and to the image width: 100% and the image is already 50 by 50 pixels, then the quality drops.

Although (maybe I'm wrong) it is scaled proportionally and should look the same as with the original values.

Website (there all the images scale so crookedly) - More details

Answer 1

1. An image has a physical size. Any manipulation to “shove” it into a size larger or smaller will affect the rendering. Plus, retinization plays a huge factor. If you're working with a 50x50 bitmap and stuffing it into a 50x50 size and looking at it from a high-density screen, expect surprises. Nevertheless, all this is better than trying to stretch the picchu, everything is bad there.
2. You have a bunch of icons in your layout, not pics, use SVG, it’s the format of the drum (almost), what size you enter it in, the main thing is not to mess around in the parameters.