Is 1572 KB too big img gallery?

Discussion in 'Web Design and Development' started by Dal123, Sep 1, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    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 :eek:: 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:
    HTML:
    <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.
     

    Attached Files:

  2. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #2
    You could have your CSS as something like

    Code:
    .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:
    Code:
    <div class="thumbnail">
         <?php
              while (images to output)
              {
                   echo '<a href="link"><img src="img_src" /></a>';
               }
          ?>
    </div>
    
    Is that what you mean?
     
  3. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #3
    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 :eek:.

    More important than that at the moment is the size of the page. Do you think it is too big? How does one compress?
     
  4. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #4
    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.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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.
     
  6. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    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 :).
     

    Attached Files:

  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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,
    HTML:
    <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,
    Code:
    /*.thumbnail { // removed */
    #page_content a {
     display: block; /*added*/
     width:134px;
     height:80px;
     float:left;
     border:none;
     padding:0px 2.4px 5px 0px;
    }
     
  8. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #8
    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 :D:D.
    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?
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    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.
     
  10. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #10
    Cool, understand how to tackle future problems like that now. :) Thanks again angelwatt, much appreciated :D.
     

Share This Page