Ultimate Fade-in Slideshow (2.6) Image "Blinking"

[jefreygunion]

Script: Ultimate Fade-in Slideshow (2.6)
http://www.dynamicdrive.com/dynamici...nslideshow.htm


Hi,
I've got the Ultimate Fade-in Slideshow (2.6) working great on my clients site, but I'm noticing that some of the "slides" (all PNG images) "blink" with the previously displayed image for a millisecond, then transition to the next. There's an array of 37 slides so far. The blinking only occurs on some of the images.

http://www.codar.com/

Is there a specific line in the fadeslideshow.js file that controls this or that can be modified to remedy the blinking?

Thanks for any help!!!

Jef

[Beverleyh]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[Beverleyh]

Hmmm, as a starting point I think you should address the size and quantity of your images - more than 60 (in total) at ~5.5MB is massively overweight for a web page. I'm on mobile at the moment (thankfully on wifi and not using my data package) and the page took around 15 seconds to appear on my screen. Visitors tend not to hang around for more than a few seconds.

Consider reducing the quantity of images - 10 in a slideshow would be plenty for most use cases. I really don't think people will sit and wait for all 37 slides to scroll by so you're imposing a heck of a lot of weight for not much benefit. Most of them will not be viewed. If I were you, I'd put a small selection of the best images in the slider but then include a button/link to something more user-friendly, such as a standalone gallery.

You should also make sure that all your images are optimised for the web. There's an image optimisation tool here on DD http://tools.dynamicdrive.com/imageoptimizer/ and for batch conversions, try Shrink O Matic http://toki-woki.net/p/Shrink-O-Matic/ A quality setting of 60% is usually a happy trade off between size and quality.

I also just realised that you're using png images for photos - jpgs will give you better quality and compression so it would be best for you to convert them (and fill the transparent corners with matching colours from your web page so that they give the impression of being transparent without actually being so).
png-8 images are best reserved for simple logos, diagrams and 1-bit transparency, while png-24/32 are best suited to images that require alpha-transparency (overlays, custom fade effects).
Jpeg/jpg is the most appropriate format for intricate images with millions of colours (photos)

[jefreygunion]

Thanks for the quick reply Beverly!

I understand all the image optimization options, and the quantity of images in the slideshow. The images have to be transparent to allow for the page background to show through on the rounded edges of the slides. And the client wants all those images in there, so getting rid of some isn't an option. We already have an external "gallery" of these images in higher resolution as well. I think I'll try your suggestion of further optimization for the PNGs to see if that helps.

Thanks again!