Welcome Guest, Register to Remove this Message!

[leo]

When you start to advance with your web design you wil realise that image size is very important because it affects the page loading time and your bandwidth usage, the larger the image (file) size the more of both loading time and bandwidth is used up.

For saving on the web we use two formats, .jpg and .gif

Use .jpg when the image has a lot of detail.

Use .gif when the image has a lot of flat colored areas (no intricate detail or blending colors)


The following examples focus on using photoshop's "save for the web" feature which allows you to adjust several settings

saving as .jpg

The following high detailed image was compressed to 5kb using only the quailty adjustment and saved as a .jpg with no blurring


the same image was then saved as a .gif and compressed to 5kb by reducing the amount of colors used



saving as .gif

the following low detail, flat color intense image was saved as .gif at 256 colors and compressed to just below 10kb:



the same image was then saved as a .jpg and compressed to the same 10kb by reducing the quality and adding a blur:



in both of the examples above the second images could have acheived the same quality but the filesize would have been vastly bigger.

TIP- re-use as many images throughout your site as possible as your visitors only need download the first image and the rest they will get from their internet cache on their pc's.

Further save for the web tips (aimed at photoshop)

.jpg
Quality - is fairly self descriptive, scale from 1 to 100, 100 being the best and 1 lowest quality
Blur - you can further reduce your filesize by blurring your image, the higher the number the more blurred
optimized- reduces filesize but may be less compatible
Progressive - will cause the image to download in multiple passes, reduces size only slightly

.gif
Color - reduce the number of colors to reduce the filesize, along with quality
Dithering - reduces the amount of horizontal repetition therefore increasing filesize. If you use dither you can set the type of algorithm such as diffusion, pattern or noise
Web snap - will change the images colors to match those of the web safe color palette
Color reduction algorithm - these are basically presets you can choose from for reducing colors
Interlaced - causes image to download in passes and will increase image size drastically
Lossy - Will cause a decrease in the detail of the image along with a decrease in file size.


Both .jpg and .gif have the option of saving as matte, set this to the color of the background the image will go on, it will make it blend in better.

[Timo]

Some online sites can do this for you if you lack photoshop or any other image software which allows it...

http://www.gifworks.com/ - For gifs only
http://www.netmechanic.com/cobrands/zd_dev.../accelerate.htm - lacks any working pictures in the design but still works really well. Can take jpg or gif.