Freeola Internet Get Dotted Domains Blog Guides Chat

Viewing Thread:
'Photo sizes on websites - make your site load faster...'

Mon 19/06/06 at 15:38:
Moderator
"Are you sure?"
Posts: 4,934
Another Freeola web tip...

One of the biggest (and easiest) mistakes to make when putting images on a website, is having the images far too large.

Even on broadband, if you visit a web site where the owner hasn't taken a bit of care when preparing the images you will see things load very slowly or see poor quality images.
I've created a demo page (see below) where the following points are demonstrated.

Here are some basic tips:

1) Image File Type - Use the right sort of file.

If the image is a photo or contains lots of shading then it would normally be a JPG file type. If the image contains mostly flat, solid colours then a GIF file type is best.

2) Image Compression - Compress the image without loosing quality.

This is where beginners often stumble. If you take a photo straight from a digital camera, the image quality will be far too high for what is needed when viewing on a monitor.

Most photo editing software and all graphic editing software will allow you to control the amount a JPG file is 'compressed' when you save it. I use Macromedia Fireworks, but most software will work the same. When saving a photo I specify around 70% compression for photos which is a good compromise between size and quality.

3) Image Re-sizing - Don't use HTML to re-size your images.

Where images are re-sized (i.e. the physical dimensions of the photo on the web page) this should be carried out using graphics software. If the image is resized using HTML then it might look right on the web page but it will be far bigger than needed.
Often people make thumbnails like this - which take an age to load.

As a rule - Photos can only be made smaller than the original. If an image is made to look larger - then the quality will always suffer.


I've put some sample images on my free Freeola web space: www.hmmm.ip3.co.uk/photos
I've included the file size next to the images so you can compare the differences.

Hope this is of interest...
Wed 05/07/06 at 17:34:
Moderator
"Are you sure?"
Posts: 4,934
Cruciatum Fixative wrote:
> Oh I hate how this will win you GAD :D

Thanks very much for your constructive feedback!

Basics like this are very important for newcomers to web design and web graphics.

For example the images on the winning GAD website from the 3/7/6 hasn't correctly optimised the images.

The images are all roughly between 60-100k when they should all be well under 20k (and still look the same), which would make the gallery etc. load much, much faster... It's things like this that help you to keep your visitor; if a site is too slow they will often leave.

For people that are interested in web design learning these basics is a must!
Wed 05/07/06 at 08:55:
Regular
"incognito"
Posts: 98
Days don't really have anything to do with it, everything submitted during one week is ellegible to be picked as a winner the next. This was submitted in week 4 of June and won in week 5. Breaking it up into weeks makes it much easier to judge.
Wed 05/07/06 at 02:55:
Regular
"Peace Respect Punk"
Posts: 8,069
You won't win GAD on the same day you submit something... They just pick a GAD each day from recent... things (ie. Cheats, Walkthroughs, Chat, Websites, etc.)

Although eleven days between submission and GAD recognition is a bit late I'll give you that... Meh, doesn't matter really, Freeola probably saw this topic, thought it'd be good for their Knowledge Base (coming soon apparently), and thought it should get a GAD because of that.
Wed 05/07/06 at 00:48:
JL
Regular
"Colourless"
Posts: 4,345
How did this win GAD 11 days late....?
Fri 30/06/06 at 09:28:
Regular
"Mooching around"
Posts: 4,286
Oh I hate how this will win you GAD :D
Mon 19/06/06 at 15:38:
Moderator
"Are you sure?"
Posts: 4,934
Another Freeola web tip...

One of the biggest (and easiest) mistakes to make when putting images on a website, is having the images far too large.

Even on broadband, if you visit a web site where the owner hasn't taken a bit of care when preparing the images you will see things load very slowly or see poor quality images.
I've created a demo page (see below) where the following points are demonstrated.

Here are some basic tips:

1) Image File Type - Use the right sort of file.

If the image is a photo or contains lots of shading then it would normally be a JPG file type. If the image contains mostly flat, solid colours then a GIF file type is best.

2) Image Compression - Compress the image without loosing quality.

This is where beginners often stumble. If you take a photo straight from a digital camera, the image quality will be far too high for what is needed when viewing on a monitor.

Most photo editing software and all graphic editing software will allow you to control the amount a JPG file is 'compressed' when you save it. I use Macromedia Fireworks, but most software will work the same. When saving a photo I specify around 70% compression for photos which is a good compromise between size and quality.

3) Image Re-sizing - Don't use HTML to re-size your images.

Where images are re-sized (i.e. the physical dimensions of the photo on the web page) this should be carried out using graphics software. If the image is resized using HTML then it might look right on the web page but it will be far bigger than needed.
Often people make thumbnails like this - which take an age to load.

As a rule - Photos can only be made smaller than the original. If an image is made to look larger - then the quality will always suffer.


I've put some sample images on my free Freeola web space: www.hmmm.ip3.co.uk/photos
I've included the file size next to the images so you can compare the differences.

Hope this is of interest...

Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment