How to Assign URLs to Image Slices

Assigning URLs to specific image slices allows you to create interactive, clickable web layouts directly from graphic designs. This guide covers how to set hyperlinks natively inside graphic design software like Adobe Photoshop before export, as well as how to link slices manually using HTML and CSS after the images are saved.

Method 1: Assigning URLs Inside Image Editing Software

Traditional graphic design tools, most notably Adobe Photoshop, allow you to define hyperlink properties directly within the file before exporting the layout as an HTML/image package.

  1. Select the Slice: Choose the Slice Select Tool from the toolbar (grouped under the Crop Tool).
  2. Open Slice Options: Double-click the specific slice you want to make clickable. Alternatively, right-click the slice and select Edit Slice Options.
  3. Insert the URL: In the dialog box, locate the URL field and type or paste the complete destination link (for example, https://www.example.com).
  4. Set the Target (Optional): In the Target field, specify how the link should open. Use _blank to open the URL in a new browser tab, or leave it blank to open it in the same window.
  5. Add Alt Text: Enter descriptive text in the Alt Tag field to ensure web accessibility and search engine readability.
  6. Export HTML and Images: Go to File > Export > Save for Web (Legacy). In the save dialog, change the Format dropdown from "Images Only" to HTML and Images, then click Save. Photoshop will generate both the image files and an HTML file containing the table structure and embedded hyperlinks.

Method 2: Assigning URLs Manually Using HTML and CSS

Modern web standards often favor exporting individual graphic slices without generated HTML, then assembling and linking them with custom code for better responsiveness.

  1. Export the Slices: Export your individual cut images from your software as standard web assets (PNG, JPEG, or WebP).
  2. Wrap Slices in Anchor Tags: In your HTML file, place each sliced graphic inside a standard anchor (<a>) tag:
<a href="https://www.example.com/target-page">
  <img src="images/slice_01.png" alt="Descriptive text for this section" />
</a>
  1. Assemble the Grid: Use CSS Flexbox or CSS Grid to align your sliced images so they appear seamless without unwanted gaps:
.slice-container {
  display: flex;
  flex-direction: column;
}

.slice-container a img {
  display: block;
  border: 0;
}

Method 3: Using HTML Image Maps

If you prefer not to physically cut the image into multiple files, you can export a single graphic and assign clickable URL areas using an HTML client-side image map:

  1. Export the full image as a single file.
  2. Define coordinate-based links using the <map> and <area> tags:
<img src="full-graphic.png" usemap="#graphic-map" alt="Navigation Graphic" />

<map name="graphic-map">
  <area shape="rect" coords="0,0,200,100" href="https://www.example.com/link1" alt="Section 1" />
  <area shape="rect" coords="201,0,400,100" href="https://www.example.com/link2" alt="Section 2" />
</map>

Using manual HTML/CSS wrappers remains the most reliable and mobile-responsive technique for modern web development, whereas software-generated exports work well for quick prototypes and HTML email templates.