All geek questions in one place

Images lose quality per second when interacting with the page

When a page receives some kind of movement - resizing the window, scrolling, freezing, images used as icons, re-rendering and making third-party ridges, they are very clearly visible on images with a transparent background and a circular border (for example, an example) Is there any way to fix this? Example

<body> <style> body{ background: black; } img{ max-width: 5vw; transition: 1s ease; } img:hover{ max-width: 6vw; } </style> <img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png"> </body>

in this case, when you hover over the image, the image will be displayed with sharp borders, some may say that they are pixelated, and after a few milliseconds it will return to smooth borders, here is the fiddle - http://jsfiddle.net/o3qk5uaL/

+3
source share
1 answer

Good question!

This is not a problem of how the web browser displays the image and how the transition works - you redraw the image by tying the image to the aspect ratio of the dynamic window - the image size is recalculated and the browser does not paint it completely until you stop. The original image has its own resolution and will look its best at its initial resolution when changing what the image needs to be rendered at the new resolution and depends on the browser and depends on the GPU.

I found a small workaround that might help you. Try using the SVG format for these very dynamic resolution change images. SVG has no permission for its XML-based vector image format, and they are great for interactivity and animation.

Take a look at this comparison. Demo: CodePen

CODE: because we need ...

 <img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png" /> <br /><br /> <img src="http://8tracks.com/assets/brand/8_icon_white.svg" />
+1
source

Source: https://habr.com/ru/post/977093/

More articles:


All Articles