Setting Image Dims for SEO

[vflflyer]

1) Script Title:
SEO and Ultimate Slideshow

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

3) Describe problem:
I am doing a page speed test on my page at http://www.primair-inflatables.com and it is telling me that I do not have dimensions set for the images I am running in my slide, which is causing me to get grade F as I have not specifed image dimensions.

This is the div I have setup as a placeholder:
<div class="slide" id="fadeshow2"></div>.
with this css:
.slide {
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.5); /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.5); /* Safari */
box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
float: left;
margin-right: 20px;
margin-bottom: 10px;
height: 263px;
width: 350px;
}

I have added all the images into this div but that did not work, so I am assuming that it is seeing the images in the javascript on my page

My question is how can I setup dims for each image runng in the slideshow?
I hope this makes sense, as I am just learning as I go along.

Thanks

[jscheuer1]

So what?

[djr33]

Here's a discussion about getting the values using Javascript (ignore the jQuery-specific responses, or use jQuery if you'd like):
http://stackoverflow.com/questions/6...ing-javascript
But the point is that this is only a patch and won't actually change your source code because JS operates after the page loads.

A simpler answer is to specify a height and width (or at least one of them?) then change the images' sizes to fit based on that, such as all of them being 300px wide. Your choice.
Or you could just crop all of the images to the right size. If this is for a class, just do whatever your teacher says then keep the original design if you like it better-- then you have two options.


There IS a way to do this properly, but it's probably significantly beyond what you will do for this class (and possibly beyond your level of web design experience, although you can always learn it-- it's not particularly difficult). That is using a server-side language such as PHP to check the actual files on your server then generate the appropriate source code for the images based on their heights/widths.
The easiest way to do this is the following:
http://php.net/manual/en/function.getimagesize.php
But using PHP requires a few things, such as having a server with PHP installed/enabled, changing the extension of your pages to .php, and configuring everything to be generated through PHP.

[jscheuer1]

Whoa - this is for school? Well in that case, we don't do homework. Using PHP to write out your image's dimensions will only slow the page down though. I thought this grade F was for the speed test, not for school. If it's just for the speed test, then it's nothing to worry about. The page is fast, layout space is allocated by the css on the .slide class so the browser doesn't have to spend any appreciable time wondering about the image size. You could speed that up a little. Since all of the images are 350x263, you could specify that in the css:

#fadeshow2 .gallerylayer img {
	width: 350px;
	height: 263px;
}

You may still fail the speed test, but the images now have dimensions and the browser will be spending 0 time wondering about them.

But you would save way more time by optimizing those images.

In an unrelated matter, this:

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("images/nav/cbjscbinsmenu.js");
 element.src = "images/nav/cbjscbinsmenu.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

isn't doing anything other than throwing an error. That highlighted line should be:

var element = document.createElement("script");

But even then, the menu probably won't work. You would be better off just using an ordinary external script tag and then running the InitEasyMenu function onload or better yet as the last thing before the </body> tag.

Like replacing the entire code block with:

<script type="text/javascript" src="images/nav/cbjscbinsmenu.js"></script>
<script type="text/javascript">
 if (window.addEventListener)
 window.addEventListener("load", InitEasyMenu, false);
 else if (window.attachEvent)
 window.attachEvent("onload", InitEasyMenu);
 else window.onload = InitEasyMenu;
</script>

or skip that second script and add just before </body>:

<script type="text/javascript">
InitEasyMenu();
</script>

[djr33]

Oh, maybe I read that wrong. I don't know. I thought the F was for school. If it's not, I agree and I wouldn't worry about it. If it is for school, I'd just modify the page enough to get a good grade and move on, keeping the original code for later.
If it is for school, I don't have a problem helping because it sounds like you've already done the work and gotten a grade and you're just asking for extra help-- I'd still hesitate to do anything for this, but just giving some advice should be fine.

John's advice is probably most helpful though.

[vflflyer]

Thanks guys for your help The image size in css worked, but you knew it would anyway. As for deferring JS I could never get it to work without causing my screen to go blank so I gave up on it, figured it probably was not a big deal anyway.