Hi everyone:
I have had this problems a couple of times now and have not been able to figure out what the problem is.
Sometimes when I animate an image on a website(Like in an Image gallery), the animation is very rocky and not smooth at all. I did a lot of testing, but every time i seem to find something something else comes up.
I have done tests with different dimensions of images obviously the size was also different, but
although at the bigger sized images seem to make every animation on the same page rocky, sometimes even small sized images are making it rocky.
When I opened the images in Photoshop and saved them again and put the quality setting of the jpg to 6 out of 12 all the animations have become nice and smooth.
I guess this issue could depend on the image itself namely the dimension, size, file type and the method used to create the image.
But it could also be an issue with the computer or even browser in which the site is loaded.
Please let me know of anything you know about this issue, any bits of information you might have or similar problems!
Hoping for your input!
P.S.
I made a simple jsfiddle in which a very large image. The size of the image is 13.1MB and 5120x3840px.
Once it loaded, and I click the animate button the picture animates and for me, it is very rocky.