specify image dimensions

[Matthias70]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I want to specify image dimensions of my slidshow images.
All images have 470px x 180px but I don't know where to put this in the script...

4) My slideshow: http://www.gpaed.de
Thanks
Matthias

[jscheuer1]

You've already done that here (from the page's source code):

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [470, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
 ["http://www.gpa . . .

[Matthias70]

Yes, I know that the slideshow has dimensions, but I want to set dimensions just for every image on it's own.
At the moment I'm using this code for each image.
["Image_URL", "", "", "Text"],

Can I just use this for the dimensions
["Image_URL width='470' height='170' ", "", "", "Text"],

Thanks
Matthias

[jscheuer1]

Now which is it? 470x180 or 470x170?

I think you mean 470X180, and that was just a typo.

The answer is, since the images are already 470x180, you don't have to.

I just can't see any reason to specify for each image. It won't render any faster because the space is already reserved from what you did here:

<div id="fadeshow1" style="width:470px; height:180px; margin-left:20px"></div>

But if you want to make extra sure in that regard, you can put this in the stylesheet:

#fadeshow1, #fadeshow1 .gallerylayer img {
	width: 470px;
	height: 180px;
}

[Matthias70]

I just need the image dimensions, cause I want to optimze my page.
This site told to set image dimension in my startpage
http://gtmetrix.com/

I will test the changes in the stylesheet later.
Thanks so far
Matthias

[jscheuer1]

Right, that (the added style) is all the optimization you need then. It's actually superior to specifying inline.

So you could change from:

<div id="fadeshow1" style="width:470px; height:180px; margin-left:20px"></div>

to:

<div id="fadeshow1"></div>

And add to the stylesheet (instead of what I had in my last post):

#fadeshow1, #fadeshow1 .gallerylayer img {
	width: 470px;
	height: 180px;
}
#fadeshow1 {
	margin-left: 20px;
}

Now, whatever utility you are using to determine the optimization of the page, unless it actually gives you accurate comparative load times, there's no way you can believe it 100%.

It is good practice to specify everything you can on a page as far as dimensions go. That speeds the loading and layout and tends to prevent things jumping around on the page as it's loading. But, if taken to extremes, it can prevent the layout from being fluid enough to look good in various window sizes.

However much you do it, using style in an external stylesheet that is presumably loaded once for the entire site, or is at least getting loaded for that page anyway, is the most efficient. But it's also difficult for a utility that's simply analyzing the markup on a single page to detect. So that utility might not realize these dimensions are set. If so, it may tell you to set them, even though they are set.

But something else your utility probably doesn't know about is that this script preloads each image. It has to in order to know its dimensions and to be able to know for sure each is ready when needed. And that happens separately from loading the page, commencing with when the page's markup has been read, and proceeding apace as one image is shown, the next is preloaded. So you're probably not gaining anything in load time with any of this except for specifying the dimensions and margin of the fadeshow1 division, which to be most efficient should be done in the stylesheet as mentioned.

Optimization is fine, but sometimes you can just be spinning your wheels - wasting time on stuff that will net you a millisecond or nothing, or might even lose you a millisecond. If the page lays out without jumping around, you've probably done enough as far as specifying dimensions goes, regardless of what some utility says. You can always optimize your images, and/or your css and javascript code. Images (if you're not using multimedia stuff like Flash or audio, etc.) are the biggest thing though, optimize them to the lowest acceptable resolution/byte size, and you will save a lot on loading time for the page and its features.

[Matthias70]

Hi John,
thanks a lot for this explanation and for the working code.
I know it's hard to get better results, when most parts of the page are already optimized.
But the setting of the image dimensions result in 2% more page speed and this is more than I expected...

Thanks again for your help!
Matthias