Adding CSS animations negatively affects image rendering in Chrome

Question

I have a problem when adding CSS animations to a PNG image leads to a significant decrease in image rendering quality.

I have a div containing three separate PNGs, and when adding animations to any of the images, the quality decreases on all images.

The animation contains a rotation rotation, but adding it only to images (outside the key frames of the animation) does not lead to a decrease in quality. I also tried to remove all other transformations applied to the parent elements of the images, and to remove other properties, such as perspective, and this does not help. Decrease in quality occurs only when adding animation.

I see this in Chrome, and the way the image looks exactly the way it looks when rendering the image: -webkit-optimize-contrast is added.

Does anyone else face a similar problem?

Answer 1

I noticed that this could be a problem with chrome when the images rely on the browser to reduce image size. Chrome is not an image processing program and, apparently, helps speed up the rendering of quality when implementing transitions. Try using the same animation on images that don't need significant resizing and see if that helps.