Slices divide an image into smaller images that are reassembled on a web page using an HTML table or CSS layers. By dividing the image, you can assign different URL links to create page navigation, or optimize each part of an image using its own optimization settings.

You export and optimize a sliced image using the Save For Web & Devices command. Photoshop saves each slice as a separate file and generates the HTML or CSS code needed to display the sliced image.

Web page divided into slices

When you work with slices, keep these basics in mind:

• You can create a slice by using the Slice tool or by creating layer-based slices.

• After you create a slice, you can select it using the Slice Select tool  and then move, resize, or align it with other slices.

• You can set options for each slice—such as content type, name, and URL—in the Slice Options dialog box.

• You can optimize each slice using different optimization settings in the Save For Web & Devices dialog box.