Is 1572 KB too big img gallery?

[Dal123]

I've designed my image gallery for lightbox2 and saved all thumbnails as optimized in image ready. The total of my page is 1572KB and by dreamweaver's status bar it says about 5 seconds to download. When I check with Firefox's developer toolbar it says 1572 KB uncompressed and I wondered how do I compress this?
Also this is a bit of a stupid question : my xhtml validates but I have 108 images on this page and because I have used a 'spacer' '.clear:both' I have to close each thumbnail div:

<div class="thumbnail">
<a href="images_site/Caltite Basement Welwyn Garden City/8-Waterproof Basement.jpg" rel="lightbox[concrete_basement]" title="External Shutters erected."><img src="images_site/images_thumbs/Caltite Basement Welwyn Garden City/8-waterproof_basement_thumb.jpg" alt="Waterproof, Reinforced Concrete Basement, Formwork/ Shuttering, Steel-Fixing/ Reinforcement and Concrete Placement provided by Precise Formwork Limited."/></a>
</div>
<div class="thumbnail">
<a href="images_site/Caltite Basement Welwyn Garden City/9-Waterproof Basement.jpg" rel="lightbox[concrete_basement]" title="External Shutters erected."><img src="images_site/images_thumbs/Caltite Basement Welwyn Garden City/9-waterproof_basement_thumb.jpg" alt="Waterproof, Reinforced Concrete Basement, Formwork/ Shuttering, Steel-Fixing/ Reinforcement and Concrete Placement provided by Precise Formwork Limited."/></a>
</div>

And it got me thinking: how does one do it properly? I understand that PHP should be used to get things like headers and nav bars and am looking into this.

 

[Cerebrus' Maw]

You could have your CSS as something like

.thumbnail a {

clear:both;
/*other style */
}

This will make all the <a> tags within your thumbail class div have your css properties. Couple that with PHP to put your images into that div.

EG:

<div class="thumbnail">
     <?php
          while (images to output)
          {
               echo '<a href="link"><img src="img_src" /></a>';
           }
      ?>
</div>

Is that what you mean?

 

[Dal123]

I was just wondering what is the proper way to code it as it seems a little unprofessional with all them classes and divs. I have to learn php yet .

More important than that at the moment is the size of the page. Do you think it is too big? How does one compress?

 

[Cerebrus' Maw]

I was just wondering what is the proper way to code it as it seems a little unprofessional with all them classes and divs. I have to learn php yet .

More important than that at the moment is the size of the page. Do you think it is too big? How does one compress?

I wouldn't call it unprofessional. I mean, if you get PHP to output your 100+ images, it will still have the same amount of code, as if you did it by hand, the browser doesn't care how it got there.

It comes down to management. It would be a lot harder to upkeep those 108 lines of images if they are hard coded in, rather then just change one line of a while loop in PHP!

RE: page size. I'm a bit of a stickler of size, and I do believe that a page over 1MG is big. Yes, people will harp on about broadband, and high speed access, nonetheless, everyone appreciates good, quick rendering pages. I would maybe try splitting across two pages?

There are tools that allow page compression (Avsoft?Avtool?) that work in someways like ZIP and compress your pages, which your browser then uncompress and display. However, never used one, and not sure about compatibility with all browers.

 

[angelwatt]

Here's a pretty good write up on compression that you would be looking at. You probably don't need to worry about it right now. The image files you're using are already compressed so using further compression won't result in much gain.

Your page size is a tad high, but considering it's a page full of images, it's expected. For 108 images and a page size of about 1.5MB, that means the images are only 10-12KB a piece, which is quite small. If you had a lot of text, then that could be compressed a lot, but image formats like JPEG and GIF are already compressed formats.

As far as simplifying your thumbnail class, I'd need to see the CSS as well in order to suggest simplifications. Cerebrus' Maw's suggestion is on the right track though.

 

[Dal123]

Thanks guys; great advice as always. I've attached the files as a zip; the one I'm talking about is gallery1.htm.
Checking out page compression now.
Thanks again chaps .

 

[angelwatt]

OK, here's my suggested change. I can't completely tell how it will affect things as I don't have the images so it's just showing the alt text, which is a mess on screen.

Your HTML will be like,

<div id="page_content">

<a href="images_site/Caltite Basement Welwyn Garden City/2-Waterproof Basement.jpg" rel="lightbox[concrete_basement]" title="Concrete Slab and Kickers cast, 'Caltite' Concrete used throughout; retardant sprayed on kickers to ensure excellent 'dry-joints'"><img src="images_site/images_thumbs/Caltite Basement Welwyn Garden City/2-waterproof_basement_thumb.jpg" alt="Waterproof, Reinforced Concrete Basement, Formwork/ Shuttering, Steel-Fixing/ Reinforcement and Concrete Placement provided by Precise Formwork Limited."/></a>

<a href="images_site/Caltite Basement Welwyn Garden City/3-Waterproof Basement.jpg" rel="lightbox[concrete_basement]" title="Concrete Slab and Kickers cast, 'Caltite' Concrete used throughout; retardant sprayed on kickers to ensure excellent 'dry-joints'"><img src="images_site/images_thumbs/Caltite Basement Welwyn Garden City/3-waterproof_basement_thumb.jpg" alt="Waterproof, Reinforced Concrete Basement, Formwork/ Shuttering, Steel-Fixing/ Reinforcement and Concrete Placement provided by Precise Formwork Limited."/></a>
...

Here's the only changed CSS,

/*.thumbnail { // removed */
#page_content a {
 display: block; /*added*/
 width:134px;
 height:80px;
 float:left;
 border:none;
 padding:0px 2.4px 5px 0px;
}

 

[Dal123]

Thanks angelwatt, I'm just editing my caption text, I'm going to back it up once this is complete and try your suggestion.
Thanks a lot, really appreciate it .
One thing: page_content is used on every page on my site; by formatting 'a' any anchor won't this change the appearance of all my other anchors?

 

[angelwatt]

One thing: page_content is used on every page on my site; by formatting 'a' any anchor won't this change the appearance of all my other anchors?

Yup, that's something I thought about. If need be, you can just add an additional div to wrap all those links together. Essentially, take the .thumbnail divs you had an make it a single one that wraps all of them. Then you can update the CSS selector I gave to the name you give it.

 

[Dal123]

Cool, understand how to tackle future problems like that now. Thanks again angelwatt, much appreciated .