If you plan to email your photos or put them up on your website, Save For Web is a terrific feature that takes any open image and saves it in a web-friendly format. It also gives you lots of options to help maintain maximum image quality while keeping file size to a minimum. Save For Web aims to create as small a file as possible without compromising the image’s onscreen quality.
Save For Web creates smaller JPEG files than you can get by using the Save As command because it strips out the image’s EXIF data, the information about your camera’s settings (see Visual Searches). To get started with Save For Web, in the Editor, go to File→“Save for Web” or press Alt+Shift+Ctrl+S/Option-Shift-⌘-S. The dialog box shown in Figure 17-1 appears.
The most important point to remember when saving images for the Web is that the resolution (measured in pixels per inch, or ppi) is completely irrelevant. You only care about the image’s pixel dimensions, such as 400 × 600. If you’re working with a photo that you’ve optimized for print, you almost certainly want to downsize it; Save For Web makes that a snap.
Elements gives you lots of useful tools in the Save For Web dialog box, like the Hand and Zoom tools for adjusting the view. But the main attraction is the before-and-after image preview in the two main preview panes. On the left is your original and on the right is what the image will look like after you save it. The file size is listed below each image preview.
Below the right preview, you see an estimate of how long it will take to download the image at that size. You can adjust the download time by modifying your assumptions about your recipient’s Internet connection speed, as shown in Figure 17-2. You can also change the zoom percentage (using the Zoom menu in the dialog box’s bottom left), but you should usually stick with 100 percent because that’s the size your image will be on the Web.
Figure 17-1. The Save For Web dialog box makes it easy to get the exact image size and quality you want. The left preview pane shows your original image, and the right preview pane shows what your web-friendly image will look like at its new file size, format, and quality.
Figure 17-2. Below the right-hand preview pane, the Save For Web dialog box displays an estimate of how long it’ll take to download your image. To change the download settings (for example, the speed of the Internet connection), go to the upper-right corner of the dialog box and click the arrow button to call up this list. (The items at the top of this list are explained later in this chapter on page 559.)
The upper-right part of the dialog box has your file format and quality choices (what you see varies a bit depending on which format you’ve chosen). Below that are your options for resizing the image. If you want to create animated GIFs (those tiny moving images you see on web pages), then tweak the settings in the Animation area in on the right side of the dialog box, which are explained in detail on Creating Animated GIFs.
When you’re ready to use Save For Web, follow these steps:
Open the image you want to modify in the Editor.
Launch the Save For Web dialog box.
Go to File→“Save for Web” or press Alt+Shift+Ctrl+S/Option-Shift-⌘-S. If you’re working with a large file, you may see a dialog box stating that “The image exceeds the size Save for Web was designed for,” along with dire-sounding warnings about slow performance and out-of-memory errors. Just click Yes to tell Elements that you want to continue anyway. Unless you’re using a seriously underpowered, antique computer, you won’t have any problems.
Choose format and quality settings for your web image.
Use the drop-down menu below the word “Preset” to choose a format. Your choices are explained in the following section.
If necessary, resize the image.
To make sure that anyone can see the whole image, no matter how small their monitor, enter 650 pixels or less for the longest side of the photo in the New Size area. (650 pixels is about the largest size that fits on small monitors without scrolling. If your friends all have big, new monitors, you can go much larger.) As long as the Constrain Proportions checkbox is turned on, you don’t have to enter the dimension for the other side of the photo.
You can also resize the image by entering a percentage in the New Size area (for example, typing 90 shrinks your image by 10 percent). When you finish entering the new dimensions, click Apply.
Note
Remember, if any of your friends don’t have broadband, large photos can take a long time to download on dial-up connections. Elements helps you out by telling you the download times for various connections, as explained in Figure 17-2.
Check the results.
Look at the file size again to see if the new file is small enough, and take a close look at the image in the right-hand preview area. Use Elements’ file-size optimization feature (explained in Figure 17-3), if necessary. You can also preview the image in your actual web browser (see Previewing Images and Adjusting Color).
Figure 17-3. Save For Web’s file-size optimization feature is helpful when you need to send a file someplace that puts limits on your total file size. Top: When you click the triangle to the right of the Preset menu and then choose “Optimize to File Size,” Elements displays the dialog box shown in the bottom half of this figure, where you can enter your desired file size. Bottom: The Optimize To File Size dialog box uses kilobytes as its unit of measurement. Simply enter the size you want (in kilobytes) in the Desired File Size box. Picking Current Settings tells Elements to start with whatever settings you’ve entered in the main Save For Web window, like the format and quality. Auto Select GIF/JPEG means you want Elements to decide between GIF and JPEG for you. Once you finish making your selections, click OK, and Elements shrinks the image to the size you requested.
When everything looks good, click OK.
Name the new file, and then save it wherever you like. There’s no Undo option in the Save For Web dialog box, but you can Alt-click/Option-click the Cancel button to change it to a Reset button.
Tip
If you want to process several photos in Save For Web with the same settings, Press the Alt/Option key to change the Help button to a Remember button, and then click it. That way, the next time you open Save For Web, it’ll have your current settings preselected. (At least that’s what it’s supposed to do, although it doesn’t always work properly.)
You can reduce an image’s file size by changing the length and width of the image, as explained in Step 4 above. But you can also make a file smaller by adjusting its quality settings. The quality options you see in the Save For Web dialog box vary depending on which format you choose to save the file as:
JPEG. Elements offers you a variety of basic JPEG quality settings: Low, Medium, High, Very High, and Maximum. You can then fine-tune the quality by entering a number in the Quality box (not surprisingly, a higher number means higher quality). Medium is usually good enough if you’re saving for web use. If you’re using Save For Web to make JPEG files for printing, then use Maximum instead.
If you turn on the Progressive checkbox, then your JPEG loads from the top down. This option was popular for large files when everyone had slow dial-up connections, but it makes for a slightly larger file, so it’s not as popular today. If you turn on the ICC Profile checkbox, Elements embeds a color space profile in the image. (See Choosing a Color Space for more about color spaces.)
The Matte menu lets you set the color of any area that’s transparent in the original (see Figure 17-4). If you don’t set a matte color, Elements uses white. By choosing a color that matches the background of your web page, you can make it look like the image is surrounded by transparency. You have three ways to select a color: Click the arrow to the right of the Matte box and then choose from the drop-down menu; click the arrow to the right of the Matte box and then sample a color from your image with the Eyedropper tool; or click the Matte box’s color square to call up the Color Picker.
Tip
Elements’ Color Picker lets you limit your choices to web-safe colors by turning on the Only Web Colors checkbox in its lower-left corner. But do you have to stick to this limited color palette for web graphics? Not really. You need to be seriously concerned about keeping to web-safe colors only if you know the majority of people looking at your image will be using very old web browsers. All modern browsers can cope with a normal color range. Getting colors to display consistently in all browsers is another kettle of fish entirely, as the next section explains.
Figure 17-4. When you save an image in JPEG format, the transparent areas aren’t preserved. But Elements helps you simulate transparency by letting you choose a matte color, which replaces the transparency. By choosing a matte color that’s identical to your web page’s background, you can simulate transparency. For example, the purple matte around this hibiscus blossom will blend into the purple background of the page it’s bound for.
GIF. The fewer colors a GIF contains, the smaller the file. You can use the Colors box to set the number of colors. Use the arrows on the left edge of the box to scroll to the number you want, or just type it in the box.
If you turn on the Interlaced checkbox, then your image downloads in multiple passes (sort of like an image that’s slowly coming into focus). With today’s computers, interlacing isn’t as useful as it used to be on slower machines. If you want to keep transparent areas transparent, then leave the Transparency checkbox turned on. If you don’t want transparency, then choose a matte color the way you do for a JPEG (see the previous bullet point). If you’re creating a GIF that you plan to animate, turn on the Animate checkbox. (You need a layered file to make an animated GIF; Creating Animated GIFs has the details.)
Dither is an important setting because the GIF format works by compressing and flattening large areas of colors. When you use dithering, Elements blends existing colors to make the image look like it has more colors than it actually does. For instance, Elements may mix red and blue pixels in an area to create purple. You can choose how much dither you want by entering a percentage. Depending on your image, you may not want any dithering; in that case, set the Dither field to 0%. (Dithering makes for a larger file, but in these days of large files and fast connections, the difference in size is miniscule, so you’ll usually want to use it.)
PNG-8. This option, the more basic of your PNG choices in Elements, gives you pretty much the same options you get with GIF.
With both PNG-8 and GIF, you get advanced options for how to display colors (specifically, to have Elements generate the color lookup table, which probably doesn’t mean anything to you unless you’re a web-design maven). The menu below the file-format menu lists your options. You can safely ignore this menu (Elements chooses Selective unless you change it), but if you’re curious, here are your choices: Selective favors broad areas of color and keeps to web-safe colors; Perceptual favors colors to which the human eye is more sensitive; Adaptive samples colors from the spectrum appearing most commonly in the image; and Restrictive keeps everything within the old 216-color web palette.
PNG-24. This is the more advanced level of PNG. Technically, both PNG formats let you use transparency, but more web browsers understand transparent areas in PNG-24 files than in PNG-8 files. Your other save options with this format are the same as some of those for JPEGs.
Elements gives you a few different ways to preview how an image will look in a web browser. You can start by looking at your image in any browser you have on your computer (see Figure 17-5).
Figure 17-5. To preview an image in a web browser, click the Preview In button in the bottom right of the Save For Web dialog box to launch your computer’s standard web browser. (On Macs, this button doesn’t have a graphic on it, as you see here. In Windows, the button displays your preferred browser’s icon, or the one for the last browser you used for previewing in Elements.) Or you can click the arrow and choose a browser from the list. The first time you click this arrow, you may need to pick Edit List and then click Find All to use the browser you want. Elements sniffs out every browser on your computer and adds what it finds to this menu. (Sometimes the Windows version of Elements only finds Internet Explorer, so you have to add other browsers, like Firefox, manually via the Add button in the Browsers window. On Macs, Elements is pretty good about finding them all.)
To add a new browser, in the Save For Web dialog box, click the Preview In drop-down list, and then choose Edit List. In the Browsers dialog box that appears, click the Add button and navigate to the one you want. If you want to have all your browsers listed, then click Find All. From now on, you can pick any browser in the list to make Elements launch the browser with your image in it.
If you want to get a rough idea of how your image will look on other people’s monitors, click the arrow next to the upper-right corner of the right-hand preview window (see Figure 17-2). The list that appears includes the following options:
Browser Dither. If an image contains more colors than a web browser can display, the browser uses dithering (see Previewing Images and Adjusting Color) to create the additional colors. Select this option to get an idea of how your image will look if a browser has to do this.
Uncompensated Color. This option shows colors the way they normally appear on your monitor, so it doesn’t adjust the color—it just displays what you usually see.
Standard Windows Color. Displays colors the way they should look on an typical Windows monitor.
Standard Macintosh Color. Shows colors the way they should look on an average Mac monitor.
Use Document Color Profile. If you kept the image’s ICC profile (Choosing a Color Space), then this setting tries to show how your image will look as a result.
Select one of these options and Elements displays the result in the right-hand preview pane. Keep in mind that these are all only rough approximations; you need only take a stroll down the monitor aisle at your local electronics store to see what a wacky bunch of color variations are possible. You really can’t control how other people will see your image without going to their homes and adjusting their monitors for them.