4

I have a problem where adding an CSS Animation to an PNG image causes a dramatic reduction image rendering quality.

I have a div containing three seperate PNG's, and when adding an animation to any of the images, the quality is reduced on all the images.

The animation contains a transform rotate, but adding this to the images alone (outside the animation keyframes) does not cause the drop in quality. I have also tried to remove all other transforms applied to the parent elements of the images and removing other properties such as perspective, and this does not help. The drop in quality is only when adding the animation.

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

Has anyone else come accross a similar problem?

Jack Wild
  • 1,762
  • 5
  • 23
  • 31
  • Are the image dimensions reduced by the css properties `width` or `height` or the HTML properties of the same names? – Joseph Marikle Apr 15 '14 at 19:46
  • yes they are, but without the animation added they still render well. – Jack Wild Apr 15 '14 at 19:50
  • 1
    I've noticed this can be an issue with chrome when the images rely on the browser to reduce the image dimensions. Chrome is not an image manipulation program and seems to favor speed of rendering over quality when implementing transitions. Try the same animation on images that don't need resized significantly and see if that helps. If this solves the issue, I can post it as an answer or you can wait for other input from the community. – Joseph Marikle Apr 15 '14 at 19:54
  • Thanks for the comment, will give this a go tomorrow morning first thing (don't have the access to the Repo right now) and comment on the result. Maybe in the meantime the community has some more suggestions also. Cheers. – Jack Wild Apr 15 '14 at 19:57
  • @JosephMarikle reducing the image sizes helped a lot, looks like chrome maybe uses a different way of resizing images when animations are applied. Thanks for your help. – Jack Wild Apr 16 '14 at 07:38
  • You're welcome. I'll add my comment as an answer for completeness sake. – Joseph Marikle Apr 16 '14 at 13:53

1 Answers1

2

I've noticed this can be an issue with chrome when the images rely on the browser to reduce the image dimensions. Chrome is not an image manipulation program and seems to favor speed of rendering over quality when implementing transitions. Try the same animation on images that don't need resized significantly and see if that helps.

Joseph Marikle
  • 68,672
  • 14
  • 103
  • 120