Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Speed is of the essense.

    My site has very many pictures. Which images are generally the best for this situation. pngs, jpgs, gifs or what.
    I have tried pre-loading but it slows the first page too much.
    Is there some way to preload the pictures in small batches? or some other way to maximise the general speed.

    I don't need supersonic, it is after all a family site. But some help would be welcome.

    Frank (also known as Speedy Gonzales)
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,469
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    Frank ...

    I've looked at your site and loading speed is not an issue.
    Are you using broadband, DSL or dial-up?

    As long as your images are displayed (using HTML) the same
    size as the images themselves, they'll load OK. It's when you
    take a huge gigantic photo and resize it using HTML ... that's
    when you have problems.

    But to answer your question, I think PNG is a smaller size than JPEG for the same image.
    Smaller filesize would of course load faster.

    And maybe you don't have to make the images so large?
    You'll have to determine the importance and purpose of having large images.

  • #3
    New Coder
    Join Date
    Aug 2009
    Location
    Iowa, US
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    First of all, you need to check the size of your images. Are you trying to load full-sized, full-res pictures? If so, stop that! Build thumbnail images that link to the full-sized images instead. A thumbnail of 140 on the long side x 100 on the short side should work fine.

    Make sure when you're saving your pictures that you're optimizing them for the web. That means only 72dpi - not 300, 600, 1200, or more. The larger the dpi, the slower your images will load.

    What kind of service are you using to upload? Dial-up (slow), DSL (faster), Cable (Faster still in many cases), T-1, T-3, or Fiber (very fast)? This makes a difference in the speed you'll see.

    How many images do you have on the page? The more images you have, the slower the load time.

    There are options too like using Flash to build an online viewer. Javascript might help as well but you'll need thumbnails in either case.

    Hope this helps,

    M.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you both for your feedback. My images are at 72dpi. I really do not want to alter them if possible. At the moment the site does not pre-load. This of course makes for a faster start but spoils the subsequent selection speed. The html should/will quote the existing height/width of the image which I am told is best practice.

    I would like to get the first page to download faster while still being able to pre-load the others, particularly the image captions. I ahve tried all ways to get the first page in fast and then to preload the others while being looked at. So far without success.
    I am on broadband at "Up to 8Mbs/sec." I've never had that speed yet. Lucky to get half of it. As I am using css3, I'll try some of their shadow text to see if I can do without the caption images. It all depends how it degrades with IE7/8

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    Aug 2009
    Location
    Iowa, US
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    72 dpi is good but what sizes are your images? If you're trying to load images that are 2400 pixels x 2400 pixels, for example, your downloads will take forever. It's better to use smaller images say, not more than 400 pixels on the long side. If you're loading a bunch of images - which it sounds like you are - then you'll still want to use thumbnails with links to the full sized image.

    Also, I'm confused by you saying you want the images on other pages to continue downloading while the page is loading. If you're using just html to code your pages, your images won't download until that particular html page is called (through someone clicking the link to it).

    If you're using Flash, that's a different story as Flash streams its content. If that's the case, you need to check your Flash file size and make sure it's not exorbitant.

    M.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    images are 800x600

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New Coder
    Join Date
    Aug 2009
    Location
    Iowa, US
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    how many images per page are you trying to load? 800x600 will still take a bit of time especially if you're loading quite a few. Use a program like Photoshop to generate thumbnail images and use those. Link to the larger files from there.

    M.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Details here

    Last piece of code before </body>

    Frank


    Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=us-ascii" />
    <link rel="stylesheet" type="text/css" href="exitfegs.css" />
    <title>Opening page of the Taylor website.</title>
    
    <style type="text/css">
    
     .clearfix:after { content: ""; display: block; clear: both;}.clearfix {display: inline-block;} .img{border:1px solid #88f;} .small{text-decoration:none; font-size:75%;} 
    .site{margin-top:20px; font-size:85%; }
    .hdr {margin-left:55px;}
    
    
    
    </style>
    </head>
    <body>
    <img src="23moss.png" style="display: none" />
    &lt;--!This program was written by me and extensively corrected and
    modified with the help of members of the "Coding Forums".--!&gt;
    <script type="text/javascript">
    
    
     function greet() { var hour = (new Date()).getHours(); var when = (hour > 21) ? "night" :(hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" ); document.write('<img src="' + when + '.png" alt="Good ' + when + '">\n');}
    
    </script>
    <div id="wrap">
    <div id="header">
    <p><script type="text/javascript">
    
     greet();
    
    </script></p>
    <img src="websitehome.png" /></div>
    <img src="23moss.png" style="display: none" />
    
    
    <div id="links">
    <ul>
    <div id="menu">
    <p class="hdr">Click to select.<br />
    All pictures are links.</p><br />
    
    
    <li><a href="two.html">Betty and Frank.</a></li>
    <li><a href="three.html">Little Ted and Dmitri.</a></li>
    <li><a href="four.html">Lovely Betty and Pussycat.</a></li>
    <li><a href="five.html">Betty and the Bears.</a></li>
    <li><a href="six.html">Steven and Joyce and Mark.</a></li>
    <li><a href="twelve.html">Ritcroft family group.</a></li>
    <li><a href="Eddie.html">Eddie, relaxing at home.</a></li>
    <li><a href="hol3large.html">Steven at ease at Higher Came farm.</a></li>
    <li><a href="Bluebell1.html">Steven on the Bluebell Railway.</a></li>
    <li><a href="steveviewing.html">Steve at the box.</a></li>
    <li><a href="Barker.html">Yvonne,Susan and Claire.</a></li>
    <li><a href="xmas2006.html">Christmas 2006 at Yvonne's.</a></li>
    <li><a href="nine.html">Family pictures.</a></li>
    <li><a href="hol1.html">Holiday snaps.</a></li>
    <li><a href="alifetime.html">A life span.</a></li>
    <li><a href="web19large.html">In the middle of the above.</a></li>
    <li><a href="CJStorm.html">A stormy view of Clapham
    Junction..</a></li>
    <li><a href="LittleBoyBlue.html">Little Boy Blue.</a></li>
    <li><a href="Tarantella.html">Do you remember an inn.</a></li>
    <li class="small">(One of Betty's favourite poems.)</li>
    <li><a href="frwall1.html">The Lounge.</a></li>
    <li class="site">Site updated 28th September, 2009.</li>
    </ul>
    </div>
    <div id="main" class="img"></div>
    <div class="clearfix"></div>
    </div>
    <img src="websitehome.png" style="display: none">
    <img src="hstwo.png" style="display: none">
    <img src="hsthree.png" style="display: none">
    <img src="hsfour.png" style="display: none">
    <img src="hsfive.png" style="display: none">
    <img src="hssix.png" style="display: none">
    <img src="hstwelve.png" style="display: none">
    <img src="hseddie.png" style="display: none">
    <img src="highercame.png" style="display: none">
    <img src="hsbluebell.png" style="display: none">
    <img src="stevetv.png" style="display: none">
    <img src="stevetv.png" style="display: none">
    <img src="f1.png" style="display: none">
    <img src="xmastext.png" style="display: none">
    <img src="hswhere.png" style="display: none">
    <img src="heath1.png" style="display: none">
    <img src="cjstorm.png" style="display: none">
    <img src="hsfour.png" style="display: none">
    
    
    
    </body>
    </html>
    Last edited by effpeetee; 09-29-2009 at 05:36 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,469
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    This page is an example of what not to do:
    http://exitfegs.co.uk/nine.html

    Those thumbnails should be REAL thumbnails, not the full-size image resized using HTML.
    It takes those resized images just as much time to load as the full-size, since it's the same file.

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by mlseim View Post
    This page is an example of what not to do:
    http://exitfegs.co.uk/nine.html

    Those thumbnails should be REAL thumbnails, not the full-size image resized using HTML.
    It takes those resized images just as much time to load as the full-size, since it's the same file.
    I am sorry but I am not using thumbnails on most pages. The two pages you refer to are not part of the problem. But they do not use re-sized images,
    they link to html pages with full-size images.

    The thumb nails are 120x90 pixels.



    Frank
    Last edited by effpeetee; 09-29-2009 at 07:45 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by effpeetee View Post
    I am sorry but I am not using thumbnails on most pages. The two pages you refer to are not part of the problem. But they do not use re-sized images,
    they link to html pages with full-size images.

    The thumb nails are 120x90 pixels.

    With due respect. I don't think you know what you are talking about.

    Frank
    Hi, Frank. Look at the attached screenshot from Firebug. Notice the difference between the native image size (shown on the left) and the measurements being imposed by the CSS (shown on the right). You are loading a large file to display a small icon. Some are worse offenders than others and some are actually thumbnail size. This page is a mixed bag. Anyway, the file size for the full size image in the example below is around 8x (or 16x, I'm too lazy to do math properly just now) what the file size would be for a simple thumbnail of the specified size.

    This is what mlseim is talking about. I think he wants to make sure that IF you create thumbnails for this other page you do so with separate files rather than full-size files as you apparently have done sporadically in the past.

    That is, unless I misunderstand him...
    Attached Thumbnails Attached Thumbnails Speed is of the essense.-no-no.png  
    Last edited by Rowsdower!; 09-29-2009 at 07:35 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you for your post.

    Even so, they would still not need to be downloaded again which is the point he was making.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,469
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    Frank ...

    You seem to have a great interest in family connections.

    Have you ever thought about installing a free PHP/MySQL
    system like this: http://www.phpgedview.net/

    You create standard GEDCOM files for family members/ancestory,
    and it generates family relation charts, keeps track of geneology,
    and you can upload photos, maps, documents, etc.

    Here's a working example:
    http://www.pgvthemes.com/index.php?o...pper&Itemid=39

    You can also grant admin rights to other family members to keep the info up to date.

    I think your family, grandchildren, etc. would benefit most from something like that.
    And you could use your family photos within the program.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you mlseim,

    I shall certainly look into those items. The main trouble with the nine page was that I had started to rebuild it as part of an on-going revision. I forgot to add the suffix 'a' to the image name which is what I do for thumbnails. They are a ragged bunch of thumbnails but only a little removed from the pics div dimensions. The full sized pictures are called up by url to a page with the large one on. I tried for ages to find a better way without success.

    I have over 100 html pages on my site. I am trying hard to sort them out. It's rather like trying to weed the garden.

    What I am trying to do with my present site is to get every page uniform and make it fast to load. I am getting there. Slowly.

    Regards to all of you. I expect I shall be back.

    Frank
    Last edited by effpeetee; 09-29-2009 at 08:50 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,469
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    Frank ...
    If you use a simple plain text flat-file database list, you only need one file
    to display all photos, instead of 100 separate HTML pages. Using PHP.

    The PHP script reads the lines in a simple text file ...
    each line has the photo filenames and captions.
    It then displays whatever photo you want on a dynamic page.

    You could also use LightBox (javascript display thing).

    To have 100 static HTML pages is really a lot of unnecessary work.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •