Optimising your images for the web

Monday, October 09, 2006

Whenever you put graphics on a website, you should try and make them as small as possible. This makes your pages load faster, which keeps the attention of your visitor longer. However, you don't want to sacrifice too much quality, else you'll lose the attention of your visitor!

Dynamic Drive have a range of tools available and the one I use most is their image optimiser:

Useful for gifs, animated gifs, jpgs and png files, you can upload the image either from your hard drive or an existing webpage. There is an upload limit of 300kB, but if your image is bigger than that - it shouldn't be on your website!

Once you click 'optimize', you will be presented with a list of your images with decreasing quality e.g. higher compression levels in jpgs, and fewer colours in gifs. From this list, you can quickly make a file size vs. quality judgement. To save the image, just right-click and 'save as' (or 'save image as' depending on your browser). The filename given as a default will be the same as the uploaded file with a number appended, relating to the quality you chose. From there it's a simple job to rename the image.

I recommend saving the new file with the name given (e.g. myfile_2.jpg), then renaming the original file to myfile.bak.jpg or similar, and then renaming the new file to myfile.jpg. Although this is slightly more time consuming, it means that your original image file is preserved, with a useful name - the golden rule being "Always backup or you may regret it later."

Labels: internet, resources, webdesign

Subscribe | By e-mail

Links

Playing dota allstars? Use Dotarank!
Boost sales advertise for cheap at webringnet.com. As low as 0.50$