Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Photoshop

  • Print
  • + Share This
Like this article? We recommend Optimizing Image Slices for the Web

Optimizing Image Slices for the Web

Once your graphic is complete, it's time to take it over to the Web via the File > Save For Web & Devices command. The Save For Web & Devices dialog is a great tool, in which you can take the individual slices that you made in the original layout and optimize them for the Web.

When working with web graphics, every kilobyte helps. If your graphics have a limited amount of color, you may be able to use GIF settings for the slices to reduce the file size (see Figure 7). In situations where you have more colors or photographic elements, JPG format may be a more prudent option. The Save For Web & Devices dialog lets you select individual slices and adjust how Photoshop exports them. Sometimes you may be unsure about which setting is best for a given graphic. The dialog provides two-up and four-up views, allowing you to make comparisons (see Figure 8).

Figure 7 Save For Web & Devices dialog.

Figure 8 Comparing image settings in the two-up view.

One of the hidden gems of the Save For Web & Devices dialog is located in the flyout menu in the upper-right corner. Select Optimize to File Size, and you can specify a desired file size for the slice (or series of slices), as shown in Figure 9. When you click OK, Photoshop adjusts the settings for the slice(s) to get to the file size you indicated.

Figure 9 The Optimize to File Size dialog is great for making small files.

  • + Share This
  • 🔖 Save To Your Account