If you need to manipulate a photographic image, there’s not a better program on the market than Photoshop Elements that will do the job for you.
Photoshop Elements uses various file formats such as JPEG, GIF, and PNG, to save images for the web. For example, the JPEG format is used primarily for compressing photographic images, while the GIF format is used for compressing clip art and text. Each format is designed to serve a purpose, and knowing when to use a specific format will help you design fast-loading, dynamic web documents.
When preparing images for the web, it’s important to understand that file size and format are important considerations. People aren’t very patient when it comes time to downloading web pages. Creating good-looking, yet fast-loading images keeps visitors on your web site, waiting for more. Photoshop Elements gives you the ability to perform image compression using formats such as the JPEG (Joint Photographers Expert Group), and GIF (Graphics Interchange File) formats. That will make your images as small as possible, while still retaining great image quality. In image preparation it’s all about control, and Photoshop Elements gives you the tools to make the job easy.
The Save for Web command is a dream come true for prepping images for the Internet, or even for saving images in a quick-loading format for PowerPoint slide presentations, and you don’t even have to leave Photoshop Elements. The Save for Web command lets you open any Photoshop Elements file, and convert it into a web friendly format using the GIF, JPEG, PNG-8, or PNG-24 formats. You can even try different optimization settings or compare different optimizations viewing the original image (on the left) and the preview image (on the right). In addition, the dialog area below each image provides optimization information on the size and download time of the file.
In the Editor, open an image.
Click the File menu, and then click Save for Web.
Click the Preset list arrow, and then select a new format from the available options.
Click the Format list arrow, and then select from the following options:GIF. The Graphic Interchange File format is useful for clip art, text, or images that contain a large amount of solid color. GIF uses lossless compression.
JPEG. The Joint Photographers Expert Group format is useful for images that contain a lot of soft colors, like photographs. JPEG uses lossy compression.
PNG-8. The Portable Network Graphic 8-bit functions in a manner similar to the GIF format. PNG uses lossless compression.
PNG-24. The Portable Network Graphic 24-bit functions in a manner similar to the JPEG format. PNG-24 uses lossless compression.
Select from the various options that change based on your Format selection.
Select from the various options that change the image’s width and height, and then click Apply.
Select from the various options that view and change GIF animations.
Click OK.
Enter a name, and then select a location to save the image file.
Click Save.Photoshop Elements saves the modified file, and returns you to the original image.
When you work with Save for Web, the intention is to prepare the image in one of three web formats: GIF, JPEG, or PNG. Save for Web comes with options, which will help you through the process. For example, if you choose the JPEG format, you can select the amount of compression applied to the image or if you select the GIF format, you can choose how many colors are preserved with the image. The PNG format lets you save images in an 8-bit (256 colors) or a 24-bit (millions of color) format. The options available with Save for Web give you the control you need to produce small image files with quality.
- In the Editor, open an image.
- Click the File menu, and then click Save for Web.
- Select from the various Save for Web tools:
Hand Tool. Drag the image to change the view of a document.
Zoom Tool. Click on the image to expand the view size.
Eyedropper Tool. Drag the image to perform a live sampling of the image.
- Click the Thumbnail Options button (triangle to the upper right of the optimized image), and then select color profile and bandwidth options for the image.
- Click the Zoom list arrow, and then select a view size for the preview images.
- Click the Preview In Default Browser list arrow, and then select the image.
- Click OK to save the current image using the Save Optimized As dialog box.
- In the Editor, open an image.
- Click the File menu, and then click Save for Web.
- Select the options you want to change the image size options.
Width. Enter a width in pixels.
Height. Enter a height in pixels.
Percent. Enter a percentage to scale the image larger or smaller.
Constrain Proportions. Select to constrain the width and height to maintain the original proportions. When you change the width, the height changes and vice versa.
- Click Apply to make the image size change.
- Click OK to save the current image using the Save Optimized As dialog box.
Transparency in an image allows the background where you place it, such as a web page, to show through. The GIF and PNG formats support transparency, while the JPEG format doesn’t. However, you can specify a matte color to simulate the appearance of transparency. Matting works best when the background is a solid color. The Matte option specifies the background color used to fill anti-aliased edges that lie adjacent to transparent areas of the image. The image must have transparency for the Matte options to be available. When the Transparency option is selected, the matte is applied to edge areas to help blend the edges with a web background of the same color. When the Transparency option is not selected, the matte is applied to transparent areas. Choosing the None option for the matte creates hard-edged transparency if Transparency is selected; otherwise, all transparent areas are filled with 100% white. Hard-edged transparency appears jagged and useful when a background is a texture or pattern.
- In the Editor, open an image that contains transparency.
- Click the File menu, and then click Save for Web.
- Click the Format list arrow, and then click GIF, PNG-8, or PNG-24.
- Select the Transparency check box.
- Click the Matte list arrow, and then select a color: None, Eyedropper, White, Black, or Other (to use the Color Picker).
For GIF and PNG-8, select None from the Matte menu to create a hard-edged transparency.
- Click OK to save the current image using the Save Optimized As dialog box.
- Click the File menu, and then click Save for Web.
- Click the Format list arrow, and then click GIF, PNG-8, PNG-24, or JPEG.
- For GIF and PNG-8, select from the following options:
Full and Blend Transparency. Select the Transparency check box to keep fully transparent pixels transparent and blend partially transparent pixels with the matte color. This prevents the halo effect and the jagged edges of hard-edged transparency.
Fill Transparency. Deselect the Transparency check box to fill transparent pixels with the matte color and blend partially transparent pixels with the matte color.
- Click the Matte list arrow, and then select a color: None, Eyedropper, White, Black, or Other (to use the Color Picker).
When you select None for the JPEG format, white is used as the matte color.
- Click OK to save the current image using the Save Optimized As dialog box.
If a web user displays a 24-bit image on a computer with an 8-bit color display, the computer uses a technique called dithering to simulate colors it can’t display to avoid color banding. Dithering uses adjacent pixels of different colors to give the appearance of a third color. There are two different kinds of dithering depending on where you display an image: Application and Browser. Application dither uses a dithering pattern in GIF and PNG-8 images to simulate colors, while Browser dither shifts selected colors in GIF, PNG, and JPEG images using an 8-bit color display to web-safe colors. In the Save for Web dialog box you can adjust the percentage level you want for dithering.
- In the Editor, open an image.
- Click the File menu, and then click Save for Web.
- Click the Format list arrow, and then click GIF or PNG-8.
- Click the Dither list arrow, and then drag the slider to the percentage you want.
A higher percentage creates the appearance of more colors and more detail, which also increases the size of the image file.
- Click OK to save the current image using the Save Optimized As dialog box.
- Click the File menu, and then click Save for Web.
- Specify the optimization settings you want.
- Click the Thumbnail Options button (triangle to the upper right of the optimized image), and then click Browser Dither.
The optimized image (on the right) appears with the browser dither color display.
- Click OK.
Did You Know?
You can preview dither in a browser set to 8-bit color. In Windows, open the Display Properties dialog box using the Control Panel, set the Color Quality to 8-bit, and then click OK. In the Editor (in Photoshop Elements), open the image file, click the File menu, click Save For Web, click the Preview In list arrow, and then select a browser.
If you design web documents, you know that the size of your files is very important. Photoshop Elements gives you the option of compressing images in one of three Internet formats: GIF, JPEG, and PNG. The GIF format compresses images that contain solid colors with sharp, definable edges, such as clip art, and text. The JPEG format reduces the size of image files that contain a lot of soft transitional colors, such as photographs. The PNG format is a hybrid format designed to take the place of the GIF and JPEG formats. The PNG format lets you save images in an 8-bit (256 colors) or a 24-bit (millions of color) format. Whatever format you need to create stunning web images, Photoshop Elements helps you get there.
- In the Editor, open an image.
- Click the File menu, and then click Save for Web.
- Click the Format list arrow, and then select a format from the available options.
- Select the options you want to change the image’s compression, and color options.
- Click OK.
The Save Optimized As dialog box appears.
- Click the Save as type list arrow, and then select to save the image in HTML and Images, Images Only, or HTML Only.
- Click the Save in list arrow, and then select the location to save the file.
- Click Save.
Photoshop Elements comes complete with everything you will need to properly compress any JPEG file. The Internet is typically a slow device, and your visitors typically do not have much patience. When you compress a JPEG image, you’re essentially removing information from the image to reduce its file size. The unfortunate results of that reduction is loss of image quality. Internet graphics are not always the best for quality; however, reducing file size is a necessary evil, to keep visitors from clicking off your site, and moving to another. To keep the visitors happy, your JPEG images must load fast, and Photoshop Elements is just the application to help you accomplish that goal.
- In the Editor, open an image.
- Click the File menu, and then click Save for Web.
- Click the Format list arrow, and then click JPEG.
- Select from the following Quality options:
Quality. Click the list arrow, and then select a preset JPEG quality from Low (poor quality) to Maximum (best quality).
Amount. Enter a JPEG quality compression value (0 to 100). The lower the value, the more information (color) is sacrificed for image size.
- Click the Matte list arrow, and then select from the available options.
JPEG images do not support transparency. If your image contains transparent areas, use the Matte option to fill them in using a specific color.
- Select from the following options:
Progressive. Select the check box to load a JPEG in three progressive scans. Not supported by all browsers.
ICC Profile. Select the check box to embed an ICC color profile into the JPEG image. This increases file size but helps maintain color consistency between monitors, and operating systems.
- Click OK to save the current image using the Save Optimized As dialog box.
The GIF file format is used primarily for images that contain solid colors with sharp edges, such as clip art, text, line art, and logos. Since the Internet is a slow device, using the GIF format on images significantly reduces their file size, and will create fast-loading graphics. The GIF format utilizes an 8-bit pixel, and creates a document with a maximum of 256 colors (the less colors the smaller the file size). The GIF format has been around long enough for it to be considered an Internet “native” format. A native format is one that does not require a specific plug-in for the browser to display the file.
- In the Editor, open an image.
- Click the File menu, and then click Save for Web.
- Click the Format list arrow, and then click GIF.
- Click the Reduction list arrow to select a visual reduction method for the image colors.
Perceptual. Creates a custom color table using color for which the human eye has greater sensitivity.
Selective. Creates a color table close to perceptual that provides greater range of colors and preserves web color.
Adaptive. Creates a color table using color samplings from the common spectrum.
Restrictive (Web). Uses the web-safe color table (216-color) common for Windows and Mac OS.
- Select from the following options:
Color Option:
Colors. Enter or select a value from 2 to 256 maximum colors.
Transparency Options:
Transparency. Select to make the transparent areas of a GIF image transparent.
Matte. Click to fill the transparent areas of a GIF image.
Dither. Click to select a dithering scheme, and enter an amount for the mixing of the matte color.
Other Options:
Interlaced. Select to have the GIF image load in three scans.
Animate. Select to create a GIF animation.
- Click Save to save the current image using the Save Optimized As dialog box.
See Also
See “Creating an Animated GIF” on page 398 for information on creating an animated GIF.
The PNG-8 file format is used primarily for images that contain solid colors with sharp edges—clip art, text, line art, and logos—and was designed as an alternative to the GIF file format. Since the PNG-8 format generates an image with a maximum of 256 colors, it significantly reduces an images file size. While similar to the GIF file format, the PNG-8 format is not completely supported by older browsers. However, it is considered a native format to the creation of Flash animation movies.
- In the Editor, open an image.
- Click the File menu, and then click Save for Web.
- Click the Format list arrow, and then click PNG-8.
- Click the Reduction list arrow to select a visual reduction method for the image colors.
Perceptual. Creates a custom color table using color for which the human eye has greater sensitivity.
Selective. Creates a color table close to perceptual that provides greater range of colors and preserves web color.
Adaptive. Creates a color table using color samplings from the common spectrum.
Restrictive (Web). Uses the web-safe color table (216-color) common for Windows and Mac OS.
- Select from the following options:
Color Option:
Colors. Enter or select a value from 2 to 256 maximum colors.
Transparency Options:
Transparency. Select to make the transparent areas of a PNG-8 image transparent.
Matte. Click to fill the transparent areas of a PNG-8 image.
Dither. Click to select a dithering scheme, and then enter an amount for the mixing of the matte color.
Other Options:
Interlaced. Select to have the PNG image load in three scans.
- Click Save to save the current image using the Save Optimized As dialog box.
The PNG-24 file format is used primarily for images that contain lots of colors with soft transitional edges, such as photographs, and was designed as an alternative to the JPEG file format. The PNG-24 format generates an image with millions of colors, and still manages to reduce the size of a file. While similar to the JPEG file format, the PNG-24 uses lossless compression, and does not compress files as small as the JPEG format. So for the time being, most designers are still using the JPEG format for creating fast-loading web graphics.
- In the Editor, open an image.
- Click the File menu, and then click Save for Web.
- Click the Format list arrow, and then click PNG-24.
- Select from the following options:
Transparency Options:
Transparency. Check to make the transparent areas of a PNG-24 image transparent.
Matte. Click to fill the transparent areas of a PNG-24 image.
Other Options:
Interlaced. Check to have the PNG-24 image load in three scans.
- Click Save to save the current image using the Save Optimized As dialog box.
The Save for Web dialog box has many options to help you create the exact image you need—including helping you compress an image down to a specific file size. For example, you’ve just created an image you want to display on the web, but the maximum file size you can use is 35k. You could open the image, and experiment with Save for Web’s compression options, or you could use the Optimize To File Size option.
- In the Editor, open an image.
- Click the File menu, and then click Save for Web.
- Click the Format Options button, and then click Optimize to File Size.
- Enter a file size in the Desired File Size data box.
- Click the Current Settings option or the Auto Select GIF/JPEG option to let Photoshop Elements choose between the JPEG or GIF format.
- Click OK.
Photoshop Elements compresses the image.
- Click OK to save the compressed image using the Save Optimized As dialog box.
An animation is a sequence of images, or frames, that vary slightly to create the illusion of movement over time. One of the most Internet compatible ways is the animated GIF. The original designation, GIF89a, gives you an idea of how long this format has been around. The GIF file format (Graphics Interchange Format) is used primarily for clip art, text, and line art, or for images that contain areas of solid color. Once the image is created, you can open and use it in any application that supports the GIF file format. To create an animated GIF, you work with layers, where each layer becomes a frame in the animated GIF. You can create an animated GIF from scratch or open an existing image document with layers. Photoshop Elements creates a RGB color image document in the Editor.
- In the Editor, click the File menu, point to New, and then click Blank File.
- Enter a name in the Name box.
- Click the Preset list arrow, and then select from the available presets, or enter in a customized Width and Height, and Resolution.
- Click the Color Mode list arrow, and then select a color mode for the image.
- Click the Background Contents, and then click White, Background Color, or Transparent (animated GIF files look best using transparency).
- Click OK.
- Create the first image for the animated GIF.
- Press Ctrl+J to create a copy of your first animation in a separate layer.
- Modify the second image (animations are essentially the same image, modified slightly between each animation frame or, in this case each layer).
- Repeat steps 8 and 9 until you have enough cells for the animation.
Click the File menu, and then click Save As to save the file for editing purposes in the future.
Click the File menu, and then click Save for Web.
Click the Format list arrow, and then click GIF.
Select the Animate check box.
Select from the following options:Loop. Select to repeat the animation when it reaches the end.
Frame Delay. Enter the number of seconds that each frame is displayed in a web browser. Use a decimal value to specify fractions of a second.
Display Frames. Click the First Frame, Previous Frame, Next Frame, or Last Frame buttons to display the frames you want.
Click OK to save the current image using the Save Optimized As dialog box.
You can preview an image or animated GIF optimized for the web in any web browser you have installed on your computer. The browser preview displays the image or animated GIF with a caption listing the image’s file type, pixel dimensions, file size, compression information, and other HTML information. If you want to preview the image or animated GIF on a different monitor, you can change the display to simulate another color display in the Save for Web dialog box. The preview options don’t change color in the original or optimized image.
- In the Editor, open an image or animated GIF.
- Click the File menu, and then click Save for Web.
- Specify the optimization settings you want.
- Click the Preview In list arrow, and then select a browser name.
Your web browser opens, displaying the image or animated GIF along with information about the image or animated GIF.
- For an animated GIF, use your browser’s Stop, Refresh, or Reload commands to stop or replay the animation, and then click the Close button.
- Click OK.
- Click the File menu, and then click Save for Web.
- Specify the optimization settings you want.
- Click the Thumbnail Options button (triangle to the upper right of the optimized image).
- Select from the following color monitor displays:
Uncompensated Color. Displays with no color adjustment (default).
Standard Windows Color. Displays with color to simulate a standard Windows monitor.
Standard Macintosh Color. Displays with color to simulate a standard Macintosh monitor.
Use Document Color Profile. Displays with color from the image color profile, if available.
The optimized image (on the right) appears with the color display.
- Click OK.
Clip art is defined as non-photographic image information, with a lot of solid-color areas. For this process the GIF or PNG-8 formats would serve best. The GIF (Graphics Interchange File) and PNG (Portable Network Graphics) formats use an RLE (Run Length Encoding) scheme. When the file is saved, areas of solid color are compressed into small units and then restored to the file when it is opened. The GIF format supports a maximum of 256 colors. While that may not seem like much, most GIF images, such as clip art and text, contain far less color information. By reducing the number of colors available for the GIF color table, you can significantly reduce the image’s file size. For example, a GIF image of black text might only require a maximum of 2 colors (black and white). Experiment with the GIF Colors option to produce small, fast-loading image files. Since the GIF format has been around for a long time, using it almost guarantees the image will open on a visitor’s browser. The PNG format is newer, and has some new encoding schemes that make even smaller files, but it is not supported by all web browsers.
- In the Editor, open a clip art document.
- Click the File menu, and then click Save As.
- Enter a name for the file in the File name box.
- Click the Save in list arrow, and then select a location to save the file.
- Click the Format list arrow, and then click CompuServe GIF.
- Click Save.
If the Save In Version Set dialog box appears, click OK to continue.
- Select from the following Indexed Color options:
Palette. Click the list arrow, and then select from the available color palette options, including Web (Safe), Mac, and Win System palettes.
Colors. If you selected a local color, or custom palette, click to select the number of colors saved with the image. The maximum number of colors is 256.
Forced. Click the list arrow, and then select what colors will be forced to remain in the image.
Transparency. Select the check box to preserve any transparent areas.
Matte. If the image contains transparent areas, clicking this list arrow lets you select a color to fill the areas. For example, you could fill all transparent areas of the image with black to match the black of a web document.
Dither. Click the list arrow, and then select how you want the remaining image colors to mix.
Amount. Enter an Amount percentage to instruct the GIF format how aggressively to dither the image colors.
Preserve Exact Colors. Select the check box to force the preservation of the original image colors (based on how many colors were chosen using the Palette option).
- Click OK.
- If prompted, click the Normal or Interlaced option, and then click OK.
Reducing the size of a photograph presents its own particular set of problems, and Photoshop Elements comes to the rescue with the solution. For photographic images, the best format to use is the JPEG (Joint Photographic Experts Group) format. This format reduces file size by removing image information (lossy compression). For example, a 1MB uncompressed TIFF file, can be reduced to 20 or 30K using JPEG compression. That reduces the download time of the image on a 33K modem from 15 minutes, to 10 seconds. While that is quite a reduction, it also means most of the image colors have been removed and the remaining color are used in a dithering scheme to fool the eyes into seeing colors that are no longer in the image. Highly compressed JPEG images look good on a monitor, but fair poorly when sent to a printer.
- In the Editor, open a photo document.
- Click the File menu, and then click Save As.
- Enter a name for the file in the File name box.
- Click the Save in list arrow, and then select a location to save the file.
- Click the Format list arrow, and then click JPEG.
- Click Save.
If the Save In Version Set dialog box appears, click OK to continue.
- Select from the following JPEG Options:
Matte. The JPEG format does not support transparency. Click the Matte list arrow, and then select what color to fill transparent areas within the active document.
Quality. The Quality option determines the amount of image information loss. Enter a value from 1 to 12; the higher the value the more information is retained, thus creating a larger file.
Baseline (Standard). The format is recognized by most browsers.
Baseline Optimized. Produces optimized color, and a slightly smaller file size, but is not supported by older browsers.
Progressive. Displays a series of increasingly detailed scans as the image downloads. The visual impression is of a blurred image, slowly coming into focus (not supported by older browsers).
Scans. If Progressive is selected, select the number of scan passes for the image.
Size. Allows you to view the download time of the image, based on standard Internet bandwidths.
- Click OK.
While not everyone has access to a 4-color press, even casual computer users have or have access to an inkjet or laser printer. Inkjet and laser printers apply ink to the paper using dots of color. In fact, one of the measurements of quality for this type of output is its printing resolution. For example, a photo-quality inkjet or laser printer can run with a resolution of 1,400dpi and higher, or one thousand four hundred dots of color information per linear inch. There are several file format options for output to print, however none is so versatile as the TIFF format. The Tagged Image File Format, uses lossy or lossless compression, and lets you save multiple layers, as well as alpha channel information. In addition, there is hardly a layout application in the marketplace, Macintosh or Windows, that will not open a TIFF saved image.
- In the Editor, open an image document.
- Click the File menu, and then click Save As.
- Enter a name for the file in the File name box.
- Click the Save in list arrow, and then select a location to save the file.
- Click the Format list arrow, and then click TIFF.
- Click Save.
If the Save In Version Set dialog box appears, click OK to continue.
- Select from the following TIFF Options:
None. No compression is performed to the image.
LZW. Performs lossless compression to the image. When used, the receiving application must have the corresponding LZW option or they will not be able to uncompress the file.
Zip. Performs a standard Zip (lossless) compression to the image. Receiving application must have an unzip utility.
JPEG. Performs lossy (image loss) compression to the image.
IBM PC. Select PC if the image is to be used on a Windows system.
Macintosh. Select Macintosh if the image is to be used on a Macintosh system.
Save Image Pyramid. Check to save the image using several image resolutions, and lets you decide, when reopening the image, what resolution to use.
Save Transparency. Check to preserves any transparent areas in the active image.
RLE. Run Length Encoding (RLE) helps to compress solid areas of color across multiple layers.
ZIP. Uses the Zip format to compress multiple layers.
Discard Layers And Save A Copy. Creates a copy of the file without the layers, essentially saves a composite image file.
- Click OK.
Remember that raster images are all about resolution. Images have a specific scanned resolution (spi, samples per inch), your monitor has a resolution (ppi, pixels per inch), and output devices such as inkjet printers (dpi, dots per inch), and high-end presses (lpi, lines per inch). While all these terms may seem a bit complicated, they’re not; they simply explain how much resolution, or information is contained within the image.
Most computer monitors are set to a fixed resolution of 72 or 96 ppi. Say you scan an image a 4 by 4 inch image at 288spi (that’s 4 times the resolution of a 72ppi monitor). If you attempted to display the image at 100 percent view, the monitor would take the image pixels and adjust the width and height to match its resolution, so the image would be 16 by 16 inches (288 divided by 72 = 4). With monitors 16 inches is not an exact number, but it’s close enough for this example. If you attempt to reduce the zoom size of the image to make it fit the monitor size, Photoshop Elements will have to remove pixels from the image to make it fit. This typically causes the image to generate jagged lines; especially around angles lines. The moral of this story is when adjusting an image for viewing on a monitor, for example a slide presentation, never change the zoom of the image to fit the monitor, always adjust the resolution by selecting the Image menu, pointing to Resize, and then clicking Image Size.
When it comes to output, such as to an inkjet print, the rules are a bit more forgiving. Many output devices have print resolutions of 1,440 or higher. However, we’re not talking about fixed monitor pixels (ppi), we’re talking about dot of ink hitting a piece of paper (dpi). Most inkjet printer, because of the dot gain of the inks (that’s the amount of space a dot of ink spreads when it hits the paper), does not need image resolution greater than 300spi. Unlike a monitor, if you use higher resolutions than needed, the image typically will not suffer, quality wise, you’ll just be printing an image with a larger file size. However, that can be a time-wasting problem. For example, a 300spi 8 by 10 image will have a file size of about 20MB, the same image scanned at 1200spi will produce a 329MB file size. When you print the two images, you will probably not notice any quality difference; however, it will take, on average, 6 minutes longer to print the 1200spi document on most mid-range printers.
The bottom line is that resolution represents the amount of information contained within a linear inch; however, various devices handle that same resolution number differently. The good news is that understanding those differences helps you to create a useable workflow. Knowledge is power.