How to make an image sharper when scaling it?

Question

css

If you zoom in (reduce the size of a large image, or enlarge a small image), it becomes blurry. Here, for example, link , the image is adapted without strong blur, which is better compared to standard scaling.
Are there any css methods or js plugins that can solve the problem with blurry images when zooming?

Answer 1

CSI does not share its technology.
In reality, you need to prepare several images in different sizes. And styles or scripts from the list by size will choose the appropriate one.

Answer 2

<img src="clock-demo-thumb-200.png" 
      alt="Clock" 
      srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
      sizes="(min-width: 600px) 200px, 50vw">

Answer 3

Maybe it's worth showing the image in one resolution before scaling, and then in another?

Answer 4

Use tag <picture>or media conditions or SVG
https://webref.ru/html/picture