Optimize Images for the Web

There are few more important practices to the usability of your site than the process of optimizing Web images. The process requires creating images in the optimal format - in the optimum quality and at the optimum file size. Let's look at a few ways any Web master can optimize images for the Web.

Save Images for the Web
There are three aspects to keep in mind when saving images for the Web – the color mode the image has been saved in, the resolution of the image, and the format of the image.

- Images that are designated for use on the Web must always be RGB color mode. In contrast, CMYK should be used exclusively for print images.

- On the Web, a resolution of 72 dpi is optimal (contrasted to a minimum of 300 dpi for print). Images at any dpi resolution will display in a web browser, but using a resolution of 72 is the standard and assures that images will display at the size intended without reducing/enlarging image size within the HTML.

- When it comes to the optimal format for use on the Web, there is a lot of disagreement. Files must be JPEG (.jpg), GIF (.gif) or PNG (.png) although in which order and in which circumstances is up for debate.

Adjust Image Levels
Using the right color mode, the right resolution and the right format lends itself to optimized image but should you require an even smaller image size, consider adjusting levels of contrast and brightness, or the hue and saturation (color balance). While the decrease in actual file size will be minimal, it's a good practice in general to brighten/darken images based on the final landing place of the image in the website. If concerned about losing image quality before resizing the images, considering sharpening the photo/graphics before saving.

Login To Comment

Become a Member

1 comment

If in doubt, use PhotoShop's "save for web" option. If you use the "2-up" view, you'll see a before and after optimization preview. That will help you maximize image quality while minimizing file size.