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.