Hmmm... Are you sure?Hmmm... Broadband and ADSL tips and tricks


Search Freeola Chat

Search the Freeola Chat Forum

Search Freeola Chat Forum...

 
Web Page Image Optimisation - Optimising images for your website
Website 'photos' should always be in JPG format and not GIF - use GIF for logos and vector type graphics.

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

Even on a broadband internet connection, 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.

In a worse case scenario a photograph would be taken straight from a digital camera and used on a website.
With today's high quality digital cameras this could be a few mb in size! It sounds stupid - but you see it happen!

Here are some basic tips:
 

Image File Type - Use the right sort of file for your image!

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.

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 graphics software will work the same.

When saving a photo I specify around 75% compression for photos which is a good compromise between size and quality.

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 then 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.

Below are some examples of the same photo/image but shown in different formats to demonstrate these tips:

 

 

 

jpeg image - use for photos!

Photo in JPEG format
with correct compression

 

GIF image - not for photos!

Photo in GIF format
GIF is the wrong format!

 

 

 

Website images - about right...

Image 1 (12k)

This is a JPG compressed by around 70% - just about right.

Website JPG image - way too big...

Image 2 (123k)

This is a JPG that hasn't  been compressed - far too big!

JPG compressed too much - bad quality...

Image 3 (6k)

This is a JPG file that has been over-compressed - not good!

Photo in GIF format - wrong file type, should be JPG...

Image 4 (60k)

This file is in GIF format - it looks OK but is much bigger than it needs to be...

 

Freeola webmaster tips and tricks

site map