Slices overview

When you design graphics for the web, different parts of an image often need to behave independently. One area might link to a URL, another might load faster, and another might need different enhancement settings. Slices split a single image into a grid of smaller pieces that work together as a web page while keeping each in control over each section.

Photoshop reassembles sliced images on web pages using HTML tables or CSS layers. When you export a sliced image with File > Export > Save for Web command, Photoshop saves each slice as a separate file. It also generates the HTML or CSS needed to display the image as a single composition in a browser.

How slices work

Slices divide an image along invisible grid lines, creating rectangular sections that function as independent files. Each slice keeps its position in the overall layout while operating as a separate element with its own properties, enhancement settings, and behaviors.

This approach offers a few practical advantages:

• Assign different URL links to create clickable navigation elements
• Apply varied compression settings to balance quality and file size across areas
• Update individual sections without re-exporting the entire composition

Slice type by creation

Photoshop categorizes slices based on how they're created, and each type behaves differently as you edit your image.

• User slices: Sections you define manually using the Slice tool. You have complete control over their size, position, and properties, and they stay in place until you move or modify them.
• Layer-based slices: Slices include all pixels in a layer. Their boundaries update automatically when you move or edit the layer. They work well for content that changes often, but offer less control over precise positioning than user slices.
• Auto slices: Slices that fill the remaining space in an image not covered by user slices or layer-based slices. Photoshop generates these automatically and regenerates them whenever you add, remove, or modify other slices. All auto slices in an image share the same enhancement settings.
• Sub-slices: A specialized type of auto slice that appears when slices overlap. Sub-slices show how Photoshop will divide the overlapping areas when you save the enhanced file. You can't select or edit sub-slices independently from their underlying slices.

Slice type by content

Slices are also classified by the type of content they contain.

• Image slices: The default slice type for visual content, containing image data from your Photoshop document.
• No-image slices: Empty table cells for HTML text or solid colors. Photoshop doesn't export these as image files, which makes them useful for live, selectable text.
• Table slices: Slices that define how Photoshop structures the HTML table used to reassemble a sliced image in a browser.

Slice visual cues

Photoshop uses visual cues to help you tell slice types apart as you work.

• Slice lines: Solid lines mark user slices or layer-based slices, and dotted lines mark auto slices.
• Slice colors: Blue symbols identify user slices and layer-based slices, and gray symbols mark auto slices.
• Slice numbers: Numbers in the upper-left corner of each slice run left to right and top to bottom, and update automatically when you rearrange or modify slices.
• Slice badges: Small icons identify slice content and type. For example, an image icon marks a user slice with image content, a crossed-out image icon marks a user slice with no image content, and a layer icon marks a layer-based slice.

Recognizing these visual distinctions helps you identify slice types quickly and work more efficiently with complex slice layouts when you slice web pages.