Let’s clear up the big mystery before Photoshop starts looking suspicious: a plain JPEG file cannot actually “hold” a clickable hyperlink by itself. A JPEG is an image file, not a tiny website wearing sunglasses. It can display pixels beautifully, but it cannot behave like a button unless it is placed inside something that supports links, such as an HTML page, an email editor, a PDF, or a web banner exported with supporting code.
That said, Photoshop can still help you prepare a JPEG so it becomes clickable in the right environment. You can use Photoshop’s Slice Tool to create linked areas, export HTML and images for web use, or design a JPEG and then wrap it in a hyperlink using HTML, WordPress, Shopify, Mailchimp, Gmail-style editors, or other publishing platforms. The trick is knowing where the link actually lives.
This guide explains the easiest ways to create and add a hyperlink to a JPEG in Photoshop, what works, what does not, and how to avoid the classic “I clicked my image and nothing happened” moment, which is right up there with printer jams and missing USB ports on the list of modern mysteries.
Can You Add a Hyperlink Directly to a JPEG in Photoshop?
The short answer is no: you cannot embed a working clickable hyperlink directly into a standalone JPEG file in Photoshop. If you export only a .jpg file, the hyperlink will not travel with it as an active link. The JPEG may contain metadata, color information, compression data, and visual content, but it will not contain browser-style clickable behavior.
Think of a JPEG like a printed flyer. The flyer can show a website address, QR code, button graphic, or “Click Here” text, but the paper itself does not magically open a browser. For that, you need a digital container that understands links. On the web, that container is usually HTML. In email marketing, it is the email builder. In a document, it may be a PDF or a page-layout program.
How Hyperlinks Work with Images
A hyperlink connected to an image usually works like this: the image is placed on a webpage or in an email, and the surrounding code or editor assigns a destination URL. In HTML, the image is inserted with an <img> tag, and the clickable link is created with an <a> tag around it.
Here is a simple example:
In this example, banner.jpg is not secretly storing the link. The HTML is doing the linking. The JPEG is the pretty face; the anchor tag is the brain. Together, they make a clickable image.
Method 1: Use Photoshop’s Slice Tool to Create a Clickable JPEG Area
Photoshop includes a Slice Tool that was originally designed for web layout workflows. It lets you divide an image into sections and assign URLs to specific slices. When exported correctly, Photoshop can generate image files plus an HTML file that contains the link information.
Step 1: Open Your JPEG or PSD in Photoshop
Start by opening the image you want to make clickable. If you are designing from scratch, it is better to work in a PSD file first. This keeps your layers editable, so you can adjust buttons, text, spacing, colors, and call-to-action areas before exporting the final web version.
If you already have a JPEG, open it in Photoshop and immediately save a working copy as a PSD. That way, you avoid repeatedly compressing the same JPEG and turning your crisp design into something that looks like it survived a potato-powered fax machine.
Step 2: Select the Slice Tool
The Slice Tool is usually grouped with the Crop Tool in the Photoshop toolbar. Click and hold the Crop Tool area, then choose Slice Tool. If you do not see it right away, check the toolbar customization options or use Photoshop’s search feature to locate it.
With the Slice Tool selected, drag over the part of the JPEG that should be clickable. For example, if your image includes a “Buy Now” button, draw a slice around that button. If the entire image should be clickable, drag a slice over the full image.
Step 3: Open Slice Options
After creating the slice, switch to the Slice Select Tool, then double-click the slice. This opens the Slice Options dialog box. Here, you can name the slice and enter a URL.
In the URL field, type the destination link, such as:
Use the full URL, including https://. This is especially important for email campaigns, landing pages, and web publishing platforms that expect absolute URLs.
Step 4: Add Target and Alt Text When Needed
Depending on the Photoshop version and export workflow, you may see additional fields such as target, message text, or alt text. For web use, alt text is important because it helps screen readers, improves accessibility, and gives search engines context about the image.
Good alt text should describe the purpose of the linked image. For example:
Not-so-great alt text would be:
We have all named a file like that. We do not need to be proud of it.
Step 5: Export Using Save for Web
To preserve the slice-based hyperlink, you need to export the file as HTML and images, not just as a JPEG. Go to File > Export > Save for Web (Legacy). Choose JPEG as the image format if that is what you need, then look for the export options that allow you to save HTML and Images.
Photoshop will generate an HTML file and an images folder. The HTML file contains the link code, while the images folder contains the sliced image pieces. Open the HTML file in a browser to test the clickable area.
Important Limitation of the Slice Method
If you export only the JPEG image, the hyperlink will not work. The link exists in the HTML that Photoshop creates, not inside the JPEG itself. This is the most common mistake people make with this workflow. They add a URL in Slice Options, export a JPG, upload it somewhere, click it, and then stare at the screen as if Photoshop personally betrayed them.
Method 2: Make the Entire JPEG Clickable with HTML
If you are adding the image to a website, the cleanest method is usually not Photoshop slices. Instead, design and export your JPEG from Photoshop, then add the hyperlink in your website’s HTML or content management system.
Step 1: Design the Image in Photoshop
Create your banner, product image, promotional graphic, or call-to-action image in Photoshop. Keep the layout simple and make the clickable purpose obvious. If the image is supposed to drive users to a signup page, include a clear button-style element like “Start Free Trial,” “Download Now,” or “View the Collection.”
Step 2: Export the JPEG
Use File > Export > Export As or Save for Web (Legacy) to create your JPEG. Choose a balance between quality and file size. For many web images, a quality setting around the high-middle range works well, but the best setting depends on the image detail, dimensions, and website speed requirements.
Before uploading, rename your file with descriptive words. Instead of:
Use something like:
This is better for organization and image SEO. Future-you will also appreciate not having to open fourteen mystery files just to find one banner.
Step 3: Wrap the Image in a Link
Use HTML like this:
This makes the full image clickable. The target="_blank" attribute opens the link in a new tab, while rel="noopener" is commonly used for security and performance reasons when opening new tabs.
Step 4: Test the Link
After publishing, click the image on desktop and mobile. Make sure the destination URL opens correctly, the image loads quickly, and the tap area feels natural on a phone screen. A banner that works beautifully on a laptop but behaves like a postage stamp on mobile is not a user experience; it is a tiny obstacle course.
Method 3: Add a Hyperlink to a JPEG in WordPress
If your website runs on WordPress, you do not need to force Photoshop to do all the work. Export your JPEG from Photoshop, upload it to WordPress, and apply the link in the editor.
Steps for WordPress
- Export your image from Photoshop as a JPEG.
- Log in to WordPress and open the post or page.
- Add an Image block and upload your JPEG.
- Select the image.
- Click the link icon in the block toolbar.
- Paste the destination URL.
- Choose whether the link should open in a new tab.
- Update or publish the page.
This method is easier than using slices and usually better for modern websites. It keeps your image and link manageable inside the CMS, which is useful when you need to update a URL later.
Method 4: Add a Hyperlink to a JPEG in an Email Campaign
For email newsletters, the link should usually be added in the email platform, not inside Photoshop. Tools such as Mailchimp, Constant Contact, HubSpot, Campaign Monitor, and many drag-and-drop email builders allow you to upload an image and assign a link to it.
Typical Email Builder Steps
- Create your email design in Photoshop.
- Export the graphic as a web-friendly JPEG.
- Upload the JPEG into your email editor.
- Select the image block.
- Find the link or URL field.
- Paste the full destination URL.
- Send a test email and click the image on desktop and mobile.
Email clients can be picky. Some block images by default. Some handle spacing differently. Some treat HTML like it personally offended them in 2007. Always test your email before sending it to a real audience.
Method 5: Use a QR Code Inside the JPEG
If your JPEG will be shared as a standalone file on social media, printed material, messaging apps, or anywhere links may not be attached, a QR code can be a practical workaround. The image itself still is not clickable, but viewers can scan the QR code with a phone and visit the URL.
When a QR Code Makes Sense
A QR code is useful for flyers, posters, product packaging, event graphics, restaurant menus, and social images where the file may be downloaded, forwarded, or reposted without its original clickable link.
In Photoshop, you can place a QR code as a separate image layer, position it clearly, and add a short instruction such as “Scan to view the tutorial” or “Scan for the full offer.” Keep enough white space around the code so phones can read it easily.
Method 6: Add a Link by Turning the JPEG into a PDF
If you need to send a designed graphic as a document with clickable areas, a PDF may be a better format than JPEG. Photoshop can save or export a design as a PDF, but for precise hyperlink editing, Adobe Acrobat or a page-layout tool is usually more reliable.
The basic workflow is simple: design the visual in Photoshop, export or place it into a PDF-capable tool, add the clickable link area, then save the final PDF. This is helpful for digital brochures, resumes, catalogs, lead magnets, menus, and downloadable guides.
Best Practices for Creating Clickable JPEGs
Make the Call-to-Action Obvious
A clickable JPEG should look clickable. Use a button shape, clear action text, contrast, and enough spacing. If users have to guess whether an image does something, many will not click it. The internet has trained people well: obvious buttons win.
Use Descriptive Alt Text
Alt text should explain the image’s purpose, especially if the image functions as a link. For example, “Read the full Photoshop hyperlink tutorial” is more useful than “blue banner.” For accessibility and SEO, meaningful alt text is a small detail with a big impact.
Optimize File Size
Large JPEGs slow down pages and emails. Use reasonable dimensions, compress carefully, and avoid uploading a giant 5000-pixel-wide banner when the display area is only 900 pixels. Bigger is not always better. Sometimes bigger is just slower with confidence.
Use Full URLs
When adding links in email platforms or Photoshop slice options, use full URLs that begin with https://. This reduces broken-link problems and makes the destination clear.
Test Before Publishing
Always test the image link after publishing. Check desktop, mobile, and tablet if possible. Confirm that the clickable area is correct, the URL opens properly, and the image does not look blurry or awkwardly cropped.
Common Mistakes to Avoid
Mistake 1: Exporting Only the JPEG After Adding a Slice URL
This is the classic trap. Photoshop lets you assign a URL to a slice, but if you export only a JPEG, the clickable behavior disappears. To preserve the link from slices, export HTML and images.
Mistake 2: Expecting Social Media Images to Stay Clickable
Most social platforms treat uploaded JPEGs as images, not as interactive web objects. You can include a link in the post caption, profile bio, ad setup, or button field, but the JPEG file itself usually will not carry a clickable link.
Mistake 3: Using Image Text Instead of Real Page Text
If important information appears only inside an image, search engines and assistive technologies may not understand it as well as normal HTML text. Use the image for visual impact, but place important page content nearby as real text whenever possible.
Mistake 4: Forgetting Mobile Users
A clickable image should be easy to tap. Tiny buttons inside a large banner can frustrate mobile visitors. If the entire image links to one destination, making the full image clickable is often simpler and more user-friendly.
Which Method Should You Use?
Use Photoshop slices when you need to create different clickable regions within one design and export an HTML layout. Use HTML wrapping when the entire image should link to one page. Use your CMS or email platform when publishing in WordPress, Shopify, Mailchimp, or another editor. Use a QR code when the JPEG will be shared as a standalone image. Use a PDF when you need a downloadable document with clickable areas.
For most modern websites, the best workflow is simple: design in Photoshop, export the JPEG, upload it, and add the hyperlink in the platform where the image will appear. This keeps your project cleaner, easier to update, and less dependent on older slice-based web design habits.
Practical Example: Creating a Clickable Sale Banner
Imagine you are designing a JPEG banner in Photoshop for a summer sale. The banner says, “Save 30% Today” and includes a bright button that says “Shop Now.” You want visitors to click the banner and land on your sale page.
The modern workflow would look like this:
- Create the banner in Photoshop at the correct website size.
- Export it as
summer-sale-banner.jpg. - Upload it to your website media library.
- Add it to the page.
- Set the image link to
https://www.example.com/summer-sale. - Add alt text such as “Shop the summer sale and save 30%.”
- Preview the page and test the click.
This approach gives you the visual control of Photoshop and the reliable linking behavior of your web platform. Everybody gets to do what they are good at. Photoshop designs; HTML links; your visitors click; your analytics quietly judges everything.
Extra Experience: Lessons from Real-World Photoshop-to-Web Workflows
One of the biggest lessons from working with clickable images is that the design file and the publishing environment should not be treated as the same thing. Photoshop is excellent for visual composition, image editing, color correction, typography mockups, and export preparation. But once the image leaves Photoshop, the website, email builder, or document editor controls the interactive behavior.
A practical habit is to decide the click strategy before designing the image. Ask one simple question: should the whole JPEG be clickable, or only part of it? If the whole image points to one destination, keep the design clean and let the website or email platform wrap the entire image in a link. If different parts need different links, such as a navigation-style graphic with “Men,” “Women,” and “Sale” sections, slicing or custom HTML may be required. However, modern responsive design often handles this better with separate image blocks, buttons, or CSS layouts instead of one sliced image.
Another useful experience is to avoid placing too much important text inside a JPEG. A beautiful graphic can attract attention, but real HTML text is easier to read on different devices, easier to translate, easier for search engines to understand, and better for accessibility. A strong layout might use the JPEG as the hero image, then place a real heading, short paragraph, and button nearby. This combination usually performs better than one giant image trying to do every job at once.
When creating email graphics, file size matters more than many beginners expect. A huge JPEG may look sharp in Photoshop, but in an inbox it can load slowly, appear squeezed, or trigger layout problems. Before exporting, resize the design to the actual display width. For many email banners, that means designing around common email container widths rather than exporting a massive desktop wallpaper. The image should look polished, but it should not arrive like a suitcase packed for a three-month expedition.
Testing is where small mistakes reveal themselves. A link may work on a desktop browser but feel awkward on a phone. A button graphic may look clickable, but only the image’s top-left corner may actually be linked if the HTML was applied incorrectly. An email image may look perfect in one client and slightly strange in another. Sending test emails, previewing on mobile, and clicking every linked image should be part of the workflow, not an optional victory lap.
Finally, keep a clean folder structure. Save the editable PSD, exported JPEG, compressed web version, and any HTML files in clearly named folders. Use names like homepage-cta-banner.psd, homepage-cta-banner.jpg, and homepage-cta-banner-linked.html. Clear naming saves time, especially when a client or team member asks for “that one banner from last month, the blue one, no not that blue one.” Organization may not feel glamorous, but neither does rebuilding a missing file at midnight.
Conclusion
Adding a hyperlink to a JPEG in Photoshop is really about understanding where clickable behavior belongs. Photoshop can prepare the visual, create slices, and export HTML with linked image areas, but a standalone JPEG cannot contain an active hyperlink by itself. For most projects, the easiest solution is to design the image in Photoshop, export it as a clean JPEG, and add the link in HTML, WordPress, an email platform, or a PDF editor.
If you remember only one thing, make it this: the JPEG is the visual; the platform supplies the click. Once that clicks in your brain, the whole process becomes much less mysterious and much less likely to make you blame Photoshop for crimes it did not commit.