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.
In a worse case scenario a photograph would be taken straight from a digital
camera and used on a website.
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. 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. Below are some examples of the same photo/image but shown in different formats to demonstrate these tips:
|
Photo in JPEG format
Photo in GIF format
|
Image 1 (12k) This is a JPG compressed by around 70% - just about right. |
|
Image 2 (123k) This is a JPG that hasn't been compressed - far too big! |
|
Image 3 (6k) This is a JPG file that has been over-compressed - not good! |
|
Image 4 (60k) This file is in GIF format - it looks OK but is much bigger than it needs to be... |
|
|
|