Images & Icons are getting pixelated when gallery loads

Question

I have a Content Slider (All-in-one-banner sort of) on the home page of my website. Every time this banner slides onto the next image in the queue, the other images (png format) on my page are getting pixelated. Especially it happens in Chrome.

Images and Icons such as the logos, icons used for navigation, etc... - they get pixelated when a new slide changes on the banner.

Please help me.

Demo link (Open in chrome): When the slides in the banner change, Look at the logo on the top and the logos to the right, and also the profile pics below,: indiaemerge.com/ieys2013

Answer 1

The solution I could figure out is that one should NOT use an image with large dimensions. For example: I was trying to use an image of size 800px X 400px to fit it into a division of 200px X 50px. Because of this the image was getting distorted when slides would change.

I reduced the dimensions and resolution of the image to match the target division's dimensions and it worked. Another way to fix this is to use an svg image file.

So the lesson to be learnt here is that always try to use an image (in case it is png or jpg) whose size meets your requirement as precisely as possible. If it is an svg image file then there won't be any problem.