Knowledgebase: Tips & Tricks
Optimizing Your Images
Posted by Support on 20 December 2007 04:51 AM

bitmapped (or rasterised) graphics

When producing new versions of a graphic from the original, always use the original to make each new version . This will retain as much of the quality as possible. And always ensure that the image mode is on rgb color .

This is because each time a graphics package shrinks an image , it reduces the number of colours , therefore reducing the quality. So if you use the original every time , you will always get the most colours possible.

This also means that unless the image is a vector image , you can't create a good quality larger version as there won't be enough colours to render the image at the same quality.

Once a graphics package, such as Adobe Photoshop or Macromedia Fireworks , has optimized the graphic, you cannot get back to the original quality . Gifs are indexed color and jpgs may have have their quality reduced to shrink the file size.

There will always be the sacrifice between quality and file size - smaller file size = quicker download times.

re-sizing images in a web page

Never use the width and height attributes of the < img > tag in the html of a web page to resize images. If you use this method to reduce the image size, you will increase the download time of the page as a whole. This is because the browser has to "re-draw" the image at an incorrect size which takes longer.

In addition, never use this technique to increase the size of an image - it severely reduces image quality as well as taking longer to download . Use you favorite graphics software to re-size your images properly and include the correct width and height dimensions for a speedier download. This means your site will look better, and your visitors will be happy with a quicker download time.

(635 vote(s))
Not helpful

Comments (0)