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

|Show more |Show less

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

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

Steps

Part 1

Part 1 of 2:

Creating the Hyperlink(s)

Download Article

1. 1
   Open your JPEG in Photoshop. 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.
2. 2
   Add the image or text layers that you want to turn into hyperlinks. You can create hyperlinks anywhere on your JPEG image, so add text, icons, buttons, or anything else you want viewers to click on.
   Advertisement
3. 3
   Click the Slice Tool on the toolbar. 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. 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.
5. 5
   Right-click the sliced area and select Edit slice options. This opens the editing options for the selected slice.
6. 6
   Name your slice. The name will be applied to this slice once you convert the image into slices.
7. 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.
   • To make the link accessible to sight-impaired visitors, add some text that describes the link to the Alt Tag field.
8. 8
   Click OK and repeat for other slices. 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.
Advertisement

Part 2

Part 2 of 2:

Saving the Image and Code

Download Article

1. 1
   Click the File menu and select Export. This expands some options for exporting the image.
2. 2
   Select Save for Web (Legacy). This opens the Save for Web panel.
3. 3
   Select JPEG as the image type. 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.
4. 4
   Click the Save… button. It's at the bottom of the window. This opens the Save Optimized As window.
5. 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.
6. 6
   Select a saving location. 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.
7. 7
   Name the HTML file and click Save. By default, the HTML file will have the same name as the original JPEG. You can change it if you'd like.
8. 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.
9. 9
   Add the hyperlinked image to your own website. You can copy all of the code between the <!-- Save for Web Slices> <!—End Save for Web Slices --> 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.
Advertisement

Expert Q&A

Search

Add New Question

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

Tips

Submit a Tip

All tip submissions are carefully reviewed before being published

Name

Please provide your name and last initial

Submit

Thanks for submitting a tip for review!