How to compress images for the web
Image compression for the web is a specialist skill, and one that many businesses struggle with. However, once you understand the fundamentals of resizing and creating images for the web you will be able to experiment to avoid these common mistakes.
Step one: Resize
|
To resize your images you will need image resizing software such as Photoshop, Fireworks etc. However, a great free program is Paint .NET. Once you have the necessary software, you will need to resize your image. For example: An image taken on a digital camera will be about 3000 pixels wide, while most images for the web should be approximately 300 pixels wide. |
| |
| Please consult with your developer over the best image size to suit your website design. | ||
Step two: Reduce
Once you have resized your image you will also need to reduce it's DPI*.
For example:
an image taken on a digital camera will have a DPI resolution of approximately 300 (print quality), while a website image only needs to have a DPI resolution of 72 (for onscreen viewing).
Click here for help on DPI reduction using Paint .NET >>
*A measure of the number of individual dots of ink a printer or toner can produce within a linear one-inch space. Generally, printers with higher DPI produce clearer and more detailed output - this is unnecessary on the web.
Step three: Save as
Which file format should you save your image to (once it is resized) in order to display it in the best possible way on your website?
Unfortunately, there in no simple answer to this question, as it depends on the image to be displayed. However, there are currently two widely supported formats that will display on the web; .JPG and .GIF.
If you understand what each format does best and their downsides, then you can make an educated guess about which format to choose.
.JPG |
|
.GIF |
 |
 | |
|
12KB image |
14KB image | |
|
Ideal for: Photorealistic images with lots of variation in colour (rather than photos with blocks of colour) or graphics that have colour gradients. |
Ideal for: Non-photorealistic images and Line Art that have large areas of solid colour. |
Want more helpful web hints and tips?
Register for an Xplore.net Online Knowledge base login here >>
Copyright © 2008 - 2009 Xplore.net Solutions. All rights reserved.
Powered by the Xsite Content Management System.
