Slider is very slow to load?

Hi,

My slider is very slow to load? I have about 40 images in jpeg and tiff is it because my file size is to large!

Travis

globalglam.co.uk/RunwayFashionEvent.php

Please check the url's of your photos.

Make sure the path to them are correct

Best I can find is that the first slide third and fourth work.The others have the wrong url and when fixed probly will work.

Yes,the tif pages are "HUGE".

I would never use anything like that for any webpage.I uploaded one file for a 10 second period(because it was so large I deleted it immediately) it was over 9347kb in size........
get rid of that type of huge file.
BTW,what is a tif file? I have not seen that in quite a long time.....

A tif/tiff file is a format for uncompressed images (similar to bmp). It shouldn't be used on the web. Almost always for photos, jpg is the right format for balancing size and quality. (png is an option-- higher quality, higher filesize, so not good for large images).
And in general small images are better than large images on the web.

Personally I'd consider any file over 1mb to be a 'download' rather than something you'd use on a page. And you should think twice about including anything over 200-500kb, although that isn't a huge problem these days.

I agree with Dan.

Optimisation is the way to go - it reduces the resolution (about 72dpi is standard for the web, although some folk are doubling that to prepare, quick-fix style, for retina displays) and lessens the colour pallette from the millions and millions available (upto 16.7 million colours in jpg!). You can optimise to about 60% quality and you'd still be hard pushed to notice the difference - human eyes are not that precise :)

Shrink-O-Matik is my current fave image converter for doing big batches: http://toki-woki.net/p/Shrink-O-Matic/
Although Adobe Fireworks offers better compression if you have it: http://help.adobe.com/en_US/firework...d8df-7ffa.html

DD has an online tool for optimising images too: http://tools.dynamicdrive.com/imageoptimizer/

Just remember that there's always a trade off between size and quality - web stuff should be small so have a play a decide on what's right for you.

Thanks all,

I have now changed them all to jpeg, I may still need to reduce the size tho but it already works much quicker but still take a bit to load so I guess they still need to be smaller?

Thanks,

Also did any see my other post about floating a store page and payment page over a booking and payment info page? Not sure if I explain it right! You have to click on bookings half way down, that has the floating page I would like on my payment link feather down the page it's only a small link as it's a test run!! Please take a look a see if your able to help! (I'm not sure what class to post this as?)

http://www.globalglam.co.uk/payment&bookings.php

link:http://www.dynamicdrive.com/forums/s...-an-other-page


Thanks again,

Travis

Hi Daniel,

my images still seem to be 45kb to 480kb's is this why my slider still takes load time? I first image is 480 so is that the problem? As I really don't want to lose the quality of the images as I can always notice!!

Thanks,

Travis

That's almost certainly the reason. An easy way to check is to try out the same slider with only small images-- maybe 10-20kb, just solid colors if you want. See how fast that loads, then see how much difference the larger file sizes make.

A slider or any kind of gallery is not designed for large, high quality images (or prepare for delays). If you think of a slider/gallery as a single object, then that whole object should still be a reasonable size-- if you have a number of images and some are around 400kb, then you're going to easily have a few megabytes to load, and that takes a while.

The files will load incrementally, so, yes, it will be slightly faster to load a smaller image first, or at least the initial delay will be less and maybe delays in the middle of the slider won't be so bad.

If you must have such large file sizes, then you could consider preloading (which would add a delay to load all images, although you could display "loading..." or some other place holder). Alternatively, a preloader might already be being used-- if so, you can try to find a way to disable it-- you'd get small delays on each image, but much less of an initial delay. (I'm not sure what the flickr slideshow does by default, and it's hard to tell because it uses Flash, so it could use a preloader or not. You can of course post on their support site for more specific info on that issue.)


Looking at your site, the problem as I see it is that you're wasting file size for images that look nice full screen when most of the time visitors will only see them at a much smaller size. All of the images should be reasonable to get down to about 50kb for the original small view. Then you could have alternative larger files for a full screen view of them.
But changing how the slider works would require using a new slider (unless flickr allows lots of customization).


So... you'll have to choose between convenience (whether you want to use a new script, maybe customized), speed (file size), and quality (also file size).


On the other hand, it comes across as a fairly serious image gallery, so I don't think users would be too upset about a delay; after all, the images look nice.


Just something to think about--
As a general rule, you probably want to have three different files for each image:
1) A thumbnail, around 10kb, that gives a low quality visual preview of what's coming up. (At the moment these are at the bottom of your slider; I'm not sure if they're separate files or if those are the full size images scaled down-- if so, that might be the preloading/delay you're seeing.)
2) A slideshow/gallery image, around 50-100kb, which looks decent but not perfect and is still a reasonable size, so that the quick transitions don't have a problem with loading the images.
3) A full quality* image that is accessible by clicking on the slideshow/gallery version; this would be the full screen preview or the 'download' version. (*Even here, don't use a true full quality image; use a high quality JPG with large but not excessive resolution-- probably no greater than average screen sizes, around 1024x768, and maybe smaller than that.)
[4) you can also consider having a true full quality file available only as a download such as for sending the original image to a client. Do not try to embed it on a website because it will slow the browser and take forever to load, and it's not worth it-- they can download the file if they need that kind of quality, and if not they can have a lower resolution preview, even if that's still a very nice looking version as in (3).]

By the way, using lower resolution (and slightly lower quality) images is not always a bad thing-- it can also help to prevent people from stealing your images (that is, they can still steal them, but they won't ever have the full quality versions so they can't sell print copies, etc.). Some people like that. Some people also add watermarks for that reason. I'm not suggesting you should, but just mentioning one possible advantage.

Quote:

---

Originally Posted by Travlast

I really don't want to lose the quality of the images as I can always notice!!

---

Yes, but sadly, your visitors will then always notice the very slow page.

Which images are you specifically talking about? There is no gallery loading at all in IE9 but in Chrome I see a Flickr plugin? Is that the gallery you speak of? Part of the slow-loading problem could also be due to the Flash player+plugins.

Still, you should really optimise your images. There is no reason to go any higher than 80% quality for jpg on the web. 60-75% is most appropriate. You personally might notice a tiny, tiny, difference if you look really hard, but that's because you know where to look and are comparing a before and after shot. Your visitors on the other hand, will not see any difference or reduction in quality. Try optimising them to 80% quality and have look then. The size will be drastically reduced and it will still leave a very high quality image. I just tested a 1.35MB image in DDs Optimiser and at 80% the size was reduced to 365kb - that's over a 70% saving!

I see all jpg images there now and it works fast,clean and awesome.

Great looking photos by the way

good job Travis!

Hi and thanks,

It's really the first link off of the gallery (weddings) that I am talking about the others are to be updated I wasn't going to use flicr even tho I like the full screen option ( I do believe they use a loader )

Link: http://www.globalglam.co.uk/WeddingGallery.php

I am using a slider I was recommended on Dyamicdrire. Simple Controls Gallery v1.4

Any idea's on floating pages?? Or where to post the question and is it possible?

Thanks,

Travis

Just to illustrate the negligible difference after optimisation - please open them up side-by-side to compare;

Your original/current image - 407kb
http://www.globalglam.co.uk/images/G...leryslider.jpg

Optimised image - 60%, high quality preset in Photoshop - 108kb
http://fofwebdesign.co.uk/template/_...-optimised.jpg
(Photoshop is by no means the best optimisation tool but its convenient for me to quickly show you the difference)

I don't know about you, but I'd be very happy to use the optimised version, and at a quarter of the size (and therefore, a quarter of the download time) I'm sure your visitors would be very happy if you used the optimised version too ;)

And just imagine how much of a saving you'll make once you've optimised ALL of those gallery images - a good few MBs at least!