...

View Full Version : Speed is of the essense.



effpeetee
09-29-2009, 03:37 PM
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):D

mlseim
09-29-2009, 04:13 PM
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.

edDev
09-29-2009, 04:14 PM
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.

effpeetee
09-29-2009, 04:45 PM
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

edDev
09-29-2009, 05:06 PM
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.

effpeetee
09-29-2009, 05:28 PM
images are 800x600

Frank

edDev
09-29-2009, 05:31 PM
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.

effpeetee
09-29-2009, 05:31 PM
Details here (http://www.boutell.com/newfaq/creating/preload.html)

Last piece of code before </body>

Frank



<!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>

mlseim
09-29-2009, 05:53 PM
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.

effpeetee
09-29-2009, 06:33 PM
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

Rowsdower!
09-29-2009, 07:31 PM
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...

effpeetee
09-29-2009, 07:46 PM
Thank you for your post.

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

Frank

mlseim
09-29-2009, 08:31 PM
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?option=com_wrapper&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.

effpeetee
09-29-2009, 08:46 PM
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

mlseim
09-29-2009, 10:02 PM
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.

bazz
09-30-2009, 12:06 AM
Frank your question is appropriate for what I have been trying to do.

let me digress (sort of). I have a number of thumbnails and the page which loads them needs also, to load the large image for use in the huddletogether lightbox software. so basically I am downloading thumbs and their respective enlargements. sounds like duplication to me.

what I have noticed on one of your pages is that the thumbanils are, like mlseim says, enlargements resized to thumbnails.

This is your page that I am referring to http://exitfegs.co.uk/hol1.html last image.

In your case (not mine), I think you would be better to optimise your thumbnails such that they are not much bigger than 5kb. then when someone clicks to see the large one they get it and only it. one of your images (as a thumbnail), is about 100kb ~ too heavy.

I'm still scratching my head for my problem but, I hope my suggestion fixes yours.

bazz

effpeetee
09-30-2009, 08:43 AM
Hi bazz,

The page that you mention has only small thumbnails. 160x120 oixels. They call in another page which has the full-size picture in. I am a bit puzzled.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum