How to Add a Hyperlink to a JPEG in Photoshop

Download Article

Plus, learn how to save the image as an HTML file to use the code

Written by Nicole Levine, MFA

Last Updated: November 27, 2024

Download Article

Creating the Hyperlink(s)

|

Saving the Image and Code

You can use Adobe Photoshop to turn any part of a JPEG image into a clickable web link. Photoshop's Slice Tool allows you to select areas of your image that you want people to click. It works by "slicing" up your JPEG into square segments and arranging them back into a table in an HTML file. It's not possible to save a hyperlink in a JPEG file—hyperlinks are a type of HTML code, so they require an HTML file. But don't worry—you can easily copy the code from Photoshop's HTML file and add it to your own website. This wikiHow article teaches you how to create a clickable link on an JPEG for the web using Photoshop.

How to Add Hyperlines to JPEGs in Photoshop

Open the JPEG in Photoshop & add the images you want to link.
Click on the Slice Tool and click on the area you want to link.
Right-click the sliced area and choose the “Edit slice options.”
Name the slice, enter the URL, and click “OK.”
Click File>Export>Save for Web (Legacy) and select JPEG as the type.
Click “Save.” Then, select “HTML and Images” and a saving location.
Name the file and click “Save.”

Part 1

Part 1 of 2:

Creating the Hyperlink(s)

Download Article

You can drag the image right into Photoshop, or just right-click the image on your computer, select Open with , and then choose Adobe Photoshop .
You can create hyperlinks anywhere on your JPEG image, so add text, icons, buttons, or anything else you want viewers to click on. ^{[1]
X
Research source}

Advertisement
The Slice Tool's icon looks like an Xacto knife, but you may not see it on the toolbar by default. It shares the same toolbar icon as the Crop tool, which looks like a square with two overextended lines. To open Slice Tool, click and hold the Crop tool until you see a sub-menu, and then click Slice Tool on the menu.
4
Select the location you want to hyperlink. For example, if you want to add a hyperlink to your company's name, click and drag the mouse around your company's name to select it.
- If you want to create multiple hyperlinks on the same larger image, just move on to select the next area after finishing the first. You can set the same (or different) URL for multiple areas of the image.
This opens the editing options for the selected slice.
The name will be applied to this slice once you convert the image into slices.
7
Enter the URL and other details. When the viewer clicks the selected area, they'll be transported to the URL you enter in the "URL" field. This can be a full URL (e.g., https://www.wikiHow.com ) or a relative URL (e.g., /index.html ).
- If you want the URL to open in a new browser window, type _blank into the "Target" field. ^{[2]
  X
  Research source}
- To make the link accessible to sight-impaired visitors, add some text that describes the link to the Alt Tag field.
If you want to create hyperlinks on other parts of the image, just right-click the next slice, select Edit slice options , and enter your preferences.

Part 2

Part 2 of 2:

Saving the Image and Code

Download Article

This expands some options for exporting the image.
This opens the Save for Web panel.
The default type is GIF, which you'll already see in the menu at the upper-right corner. Change this to JPEG to keep your image format the same.
It's at the bottom of the window. This opens the Save Optimized As window.
5
Select HTML and Images as the format. This tells Photoshop to save an HTML file that contains the code for your hyperlink(s) along with the images.
- When you save your hyperlinked image, you'll actually be saving multiple files: an HTML file that contains your hyperlink code, and a sub-folder called "images." The "images" folder will contain your original photo, which is now sliced into multiple files.
- Don't worry—the HTML code generated by Photoshop knows to join the images back up so that nobody will notice it's in multiple pieces.
You can save the files to an existing folder if you want—just remember you're actually saving one HTML file and a sub-folder of images—they'll need to stay together. It might be easier to create a new folder called "Hyperlink Photos" or similar so you don't accidentally move any of the files away from one another.
By default, the HTML file will have the same name as the original JPEG. You can change it if you'd like.
8
Double-click the HTML file to view your hyperlinked image. It's the file you just named that ends with ".html". Double-clicking the file will open it in your default web browser (like Chrome or Safari). As you can see, you can now click the hyperlinks you created on the image.
- If you open the .html in a text editor like Notepad or TextEdit, you'll see that Photoshop created a table that contains the parts of your image.
You can copy all of the code between the  tags and add it to any other HTML file. Just make sure to also copy the "images" folder to the same directory as that other HTML file so the images are visible.