How to Optimize Images for the Web

Optimize your images to make your Web page load faster.

Optimization refers to making an image ready to be used in a Web page. For photos taken with a quality digital camera, this includes resizing the image dimensions, since most digital cameras take large photos. It also includes compressing the data so that the file takes up less disk space with little or no loss in picture quality. This is true of optimization whether the image is resized or not.

Things You'll Need

• Adobe Photoshop, Adobe Fireworks or Internet access

Instructions

Use Web Resizer Online

1. Visit WebResizer.com and click on the "Choose File" button. Navigate to the image you want to optimize on your hard drive, click on it, and click on "OK." Then click on the "Upload image" button to upload it. You will see two versions of the photo below these buttons: the optimized image on the left and the original on the right.

2. View the optimized image and the listing for its file size (in KB), width and height (in pixels) below it. If this is satisfactory, click on "Download this image" below the optimized photo to download it. If it's not what you want, proceed with the steps below to tweak the optimization options.

3. Enter amounts for the options in the fields below the two photos. You can enter a new size (specifying either "width" or "height") and the other dimension will be calculated to keep the photo proportional. You can enter an amount from 0 to 40 for sharpening, and an amount from 10 to 100 for image quality (the higher the number, the better the quality).

4. Click on the "Apply Changes" button to see the new image. Repeat with new options until you are satisfied, or click on "Download this image" to download the optimzed image. If you want further alterations, proceed with the step below before downloading the image.

5. Adjust the image's tint, exposure, contrast or color saturation by entering numbers into the respective fields. Add border effects by setting the options for borders at the bottom. Click on "Apply Changes" and then "Download this image" when you are satisfied.

Optimize Images with Adobe Fireworks

1. Select or open an image you want to optimize in Adobe Fireworks by clicking on it (it it is already open in Fireworks) or selecting "Open" from the "File" menu to open it.

2. Select the "Optimize" panel from the panels on the right side of the Fireworks window, and select and enter options for optimization. Select the desired combination of quality and file format from the drop-down list. You can tweak the image quality by changing the number in the "Quality" box if desired.

3. Click on the "Preview" button above the image to view it as it will look with the optimization options selected.

4. Select "Export" from the "File" menu, type in a file name and click "Save" to save your optimized image.

Optimize with Adobe Photoshop

1. Select "Open" from the "File" menu to open the image you want to optimize in Adobe Photoshop.

2. Choose "Save for Web & Devices" from the "File" menu. Select the "Optimized" tab from the window that pops up.

3. Click on the drop-down list of settings from the "Preset" menu, or input individual setting options in the fields, choosing the file format, size and image quality.

4. View the preview of the image and tweak the settings as desired.

5. Enter a file name and and click on the "Save" button.

References

• AKSI: Optimizing Images for the Web
• Digital Art and Photography: How to optimize the digital photos for the Web
• WebsiteTips.com: Web Site Optimization

Resources

• Web Resizer