Test Your Mobile Site with DeviceAnywhere
Display Information with a Twitter Feed Widget
Publishing Files to a Web Server with FTP

How to Optimize JPEG Images for the Web

Having eye-catching images on your website is one of the best ways to attract image-conscious iPhone and iPad enthusiasts. The JPEG format is the best choice for optimizing continuous-tone images, such as photographs and images with many colors or gradients.

When you optimize a JPEG, you can make the file size smaller by applying compression. The more compression, the smaller the image, but if you compress the image too much, the image can look terrible. The trick is finding the right balance.

If you have a digital photograph or another image that you want to prepare for the web, follow these steps to optimize and save it in Photoshop (in Photoshop Elements or Fireworks, the process is similar although the specific steps may vary):

1

With the image open in Photoshop, choose File→Save for Web & Devices (or File→Save for Web).

The Save for Web & Devices dialog box appears.

2

In the top-left corner of the dialog box, choose either 2-Up or 4-Up to display multiple versions of the same image for easy side-by-side comparison.

The 2-Up setting makes it possible to view the original image on the top and a preview of the same image as it will appear with the specified settings on the bottom (if you’re working with a vertical image, the previews appear side by side). The 4-Up option, as the name implies, displays four different versions for comparison.

Images by artists Amy Baur and Brian Boldon, from inplainsight art.

3

On the right side of the window, just under Preset, click the small arrow to open the Optimized File Format drop-down list and choose JPEG.

The JPEG format is the best choice for optimizing continuous-tone images, such as photographs and images with many colors or gradients.

4

Set the compression quality.

Use the preset options Low, Medium, High, Very High, or Maximum from the drop-down list. Or use the slider just under the Quality field to make more precise adjustments. Lowering the quality reduces the file size and makes the image download more quickly, but if you lower this number too much, the image will look blurry and blotchy.

Photoshop uses a compression scale of 0 to 100 for JPEGs in this dialog window, with 0 the lowest possible quality (the highest amount of compression and the smallest file size) and 100 the highest possible quality (the least amount of compression and the biggest file size). Low, Medium, and High represent compression values of 10, 30, and 60, respectively.

5

Specify other settings as desired (the compression quality and file format are the most important settings).

For example, you can select the Progressive check box to display the image progressively in a web browser; that is, to display it first at a low resolution, and then at progressively higher resolutions as downloading proceeds. (Some browsers do not support progressive JPEGs.)

6

Click Save.

The Save Optimized As dialog box opens.

7

Enter a name for the image and save it into the images folder in your website folder.

Photoshop saves the optimized image as a copy of the original and leaves the original open in the main Photoshop work area.

Repeat these steps for each image you want to optimize as a JPEG.

At the bottom of the image preview in the Save for Web & Devices dialog box, Photoshop includes an estimate of the time required for the image to download at the specified connection speed. As you adjust the compression settings, the size of the image changes and the download estimate will automatically adjust.

You can change the connection speed used to make this calculation by clicking the small arrow just to the right of the connection speed and using the drop-down list to select another option, such as 256 Kbps for Cable Modem speed. Use this estimate as a guide to help you decide how much you should optimize each image.

blog comments powered by Disqus
Tweak the Mobile Switcher
Testing Your Code with Dreamweaver’s Site Reporting Features
Basic Strategies for Making Websites Mobile-Friendly
 
How to Install Safari Testing Extensions
Resize Graphics and Photos for iPad and iPhone
Advertisement

Inside Dummies.com