Exporting Web Graphics from Photoshop

Photoshop offers several ways to export digital images for use on the web or in marketing emails or other digital projects. But which of these options should you use and for which purposes?

Let’s look at three major options for exporting images: File > Save a Copy, File > Export > Save for Web (Legacy), and File > Export > Export As. All these commands will export to GIF, JPG, and PNG without a significant difference in quality, but each offers unique features for different audiences and user needs.

Warning: Photoshop, at version 23.3, is constantly being updated, while technology improvements for websites, emails, and app building are also continually evolving. Different releases of the software might behave differently.

Use Save a Copy for WEBP

The Save a Copy command is the only way Photoshop lets you save to the WEBP format. 

Files saved as WEBP, a format developed by Google, can make your images 26% smaller than PNG without losing image data (lossless compression) and 25–34% smaller than comparable JPG images by discarding some information (lossy compression).

This file format is supported by recent versions of many browsers, but not all. Sites that use WEBP are usually configured to auto-detect a visitor’s browser and serve up a WEBP image only if the browser supports it; otherwise they substitute a PNG or JPG.

As for GIF, JPG, and PNG images, the Save for Web and Export As commands will give you far superior control over image quality and file size.

The bottom line? Use Save a Copy only if you need to export to WEBP.

Save for Web

This command is technically called Save for Web (Legacy), which seems to imply that it will find itself replaced by Export As. We’ll see.

Enabling you to export images in GIF, JPG, PNG, and WBMP, this full-featured command offers many controls that aren’t available from Export As. (WBMP, an initialism for Wireless Bitmap Image File, is a little-used monochrome file format, not to be confused with WEBP.)

Flexible preview

I like how Save for Web lets you view file quality before export in several useful ways. I most often use its 2-Up view, which displays the original image side by side with the current export settings (Figure 1). 

Figure 1. Save for Web offers handy 2-Up and 4-Up views to make it easy to judge the quality you’ll get with various export settings before you apply them. Note the anticipated file size in the bottom-left of each preview pane.

Note that you can use most of the usual keyboard shortcuts to zoom in and out on these previews, and when you pan an image in one view, it simultaneously moves the previewed image in the other views, making it a cinch to quickly compare image quality.

Presets and preferences

Most of the time, when you visit the Save for Web dialog box, you will first choose a preset from the Optimize menu in the upper-right corner. Then, you can tweak the settings for compression, quality, matte color, and more. If you find yourself tweaking the settings repeatedly, you can save customized settings there (Figure 2). 

Figure 2. The Optimize menu lets you save your export settings and optimize settings for a specific file size.

Save for Web gives you oodles of options! You can control how transparency is handled in GIFs, define the color table in PNG-8s, and pretty much tweak any setting you would ever need to craft the best possible export of JPGs and PNGs. These settings can be a bit intimidating. If you don’t understand the settings, you can usually get good results with the presets.

Optimize to File Size

While you can use the Optimize to File Size command in the Optimize menu with all the file formats, this command is especially useful for exporting JPG images. As a lossy image format, JPG is always a tradeoff, and sometimes you’ll want to fuss with the settings to find the happy balance between file size and quality. (Of course, the sort of images you’re working with will ultimately influence which file formats you select.)

But you might receive a request that you make your project images no larger than a given file size—that each should weigh in at less than 32 KB, for example. In such a workflow, it’s so easy to choose JPG for the format, choose Optimize to File Size, and then enter the target file size.

Photoshop will then work backward from the target file size, determining the settings that will create the highest-­quality image within that constraint. 

Manage your metadata

Metadata is extra text information, such as copyright, camera information, and keywords, that can be added to images. (To learn more about metadata, see “Mastering Metadata” by Jamie McKee in CreativePro Magazine, Issue #5.) When exporting images for a website, you might wish to include or exclude metadata due to copyright, privacy, or file size considerations. The Save for Web dialog box makes this easy (Figure 3).

Figure 3. The Metadata menu in the Save for Web dialog box gives you control over which metadata is included in exported images.

Create animated GIFs

The Save for Web dialog box will let you export an animated GIF from a video clip or animation. Just choose one of the GIF presets, set your desired options for color reduction, dither, transparency, and size, then choose whether you want the GIF to play once, a specified number of times, or loop forever. 

You can then preview the animation right in the dialog box before you export (Figure 4).

Figure 4. Save for Web lets you specify and preview GIF animation options.

Image slicing

If you use the Slice tool or any of the other image slicing options to slice an image into multiple smaller parts, Save for Web is the only option for exporting these slices as well as the accompanying HTML/CSS code to display the slices on a web page.

Click Save when you’re done, not Done when you’re done

One thing I don’t like about Save for Web is that after you fill in all the options to your liking, you need to remember to click the Save button. I’m forever clicking the Done button thinking that will export the file as the dialog box closes (similar to clicking the Export button in the Export As dialog box, which exports and closes).

On the other hand, unlike Export As, this dialog box responds to the old trick of holding down the Option/Alt key to change the Cancel button to Reset and the Done button to Remember.

Export As

I find myself using File > Save for Web more often than File > Export As, as the many features of Save for Web fit my needs better. But Export As offers a few tricks of its own.

Batch output

The big benefit of Export As is how it will let you batch output a single file in multiple sizes or with a single command. Unlike with Save for Web, you can also output multiple artboards at once, choosing different settings for each if you wish (Figure 5).

Figure 5. The Export As command allows you to output a single file in multiple sizes or output multiple artboards as individual files, each with their own output settings.

Tip: To change the default location where Export As saves files, choose File > Export > Export Preferences and select one of the options under Export As Location. You can choose to export images next to the current document, or the last export location.

Export a single layer or layer group

You can quickly export the selected layer or layer group by choosing Layer > Export As (or right-clicking a layer in the Layers panel and choosing Export As). This will export only the selected layer, unaffected by the visibility of any layers above or below it.

Resizing tricks

If you’re going to do a lot of image resizing as you export, it is easier to achieve the best quality with Export As, which gives you a couple of tricks.

For example, Export As will let you resize the canvas as you export. Normally, you’d do so before that stage, but you might find this feature useful if you are starting with files of different dimensions that all need to be resized to the same dimensions. Or perhaps you need to export web banner images at different sizes and you just want to change the canvas size, making them longer or shorter as necessary to fit the banner specs you’ve been given.

Resizing images in Export As also gives you a new option for resizing that you can’t get in Save for Web: Bicubic Automatic. This option will choose the best bicubic resizing algorithm for the image.

Export As also offers the Preserve Details method for resizing images, unlike Save for Web (Figure 6). 

Figure 6. When you resize images, the Export As command offers more resampling options than the Save for Web command does.

What about metadata?

Even though Export As offers the option to include metadata copyright and contact info, be careful. Whether or not the metadata is actually included with the exported image seems to be buggy and inconsistent. If you want to control which metadata is included with your exported images, use Save for Web instead. 

The Official Adobe Guide

Adobe has published “Export Files in Photoshop,” an official Help article that provides an excellent technical guide on this subject.

Exporting Graphics from InDesign

Already have your graphics built in InDesign? For many uses, there is no need to bring them to Photoshop just to export them for the web. See “Graphics to Go” in InDesign Magazine, Issue 140, for all the details.

Illustrator’s Export Options

Like Photoshop, Adobe Illustrator offers a host of output options in:

• File > Save As
• File > Export As
• File > Export for Screens
• File > Export > Save for Web (Legacy)

Previous versions of Photoshop let you export to SVG, but this capability was removed in the 2021 release (version 22.5). So now the best way to export to SVG is through Illustrator.

The Choice Is Yours

Photoshop offers a few other, less full-featured ways to export web graphics:

• Image Processor (File > Scripts > Image Processor)
• Artboards to Files (File > Export > Artboards to Files)
• Layers to Files (File > Export > Layers to Files)
• Image Assets (File > Generate > Image Assets)

Which setting you’ll use depends on your workflow, your tolerance for tweaking settings, and your specific needs. At least Photoshop gives us a wealth of options for exporting digital images!