How to Hyperlink an Image in HTML (and Emails) The Right Way

You’ve got an image. You want it clickable. Sounds simple, but between email clients, responsive design, and image optimization, there’s a right way to do it.

Here’s exactly how to hyperlink an image using HTML (plus bonus tips for Cloudinary, Mailchimp, and web builders like WordPress or Wix).

To make an image clickable in HTML, wrap the <img> tag inside an <a> (anchor) tag. This creates a hyperlink so that when the user clicks the image, they’re taken to the specified URL.

Example:

<a href="https://example.com">

  <img src="https://res.cloudinary.com/demo/image/upload/sample.jpg" alt="Click here">

</a>Code language: HTML, XML (xml)

This structure includes:

• The <a> tag with the href attribute for the link destination.
• The <img> tag with the image source and an alt attribute for accessibility and SEO.

When the image is clicked, the browser navigates to the linked page.

Cloudinary gives you powerful, optimized image URLs right out of the box.

<a href="https://cloudinary.com/features">

  <img src="https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg" alt="Cloudinary Sample">

</a>Code language: HTML, XML (xml)

Want to go further with performance? Use q_auto and f_auto:

<img src="https://res.cloudinary.com/demo/image/upload/q_auto,f_auto,w_600/sample.jpg" />Code language: HTML, XML (xml)

This combination delivers images in the best format and quality for any device.

Email clients are stricter than web browsers, so you’ll want to use inline styles and absolute URLs.

Email-safe example:

<a href="https://example.com">

  <img 

    src="https://res.cloudinary.com/demo/image/upload/sample.jpg" 

    alt="Shop Now" 

    style="display:block; width:100%; max-width:600px;" 

    border="0">

</a>Code language: HTML, XML (xml)

• Use inline styles (not CSS classes)
• Avoid JavaScript or external CSS
• Use full image URLs (e.g., from Cloudinary)
• Include alt text and border="0"

No need to write code!

1. Insert an image through the visual editor.
2. Select the image and click the link icon.
3. Paste your destination URL.
4. (Optional) Set the link to open in a new tab.
5. If using Cloudinary, paste the full Cloudinary URL for performance benefits.

To open the destination page in a new browser tab without leaving the current page, add target="_blank" to your anchor tag.

Example:

<a href="https://example.com" target="_blank">

  <img src="https://res.cloudinary.com/demo/image/upload/sample.jpg" alt="Click Me">

</a>Code language: HTML, XML (xml)

Mistake	Fix
Only using <img>	Wrap it in an <a> tag
Missing alt text	Always add for SEO & accessibility
Using relative paths in email	Use full image URLs
The image has an unexpected border	Add border="0" in email HTML
Link opens in the same tab	Add target="_blank” if preferred

Want to link from a blog card, promo banner, or CTA?

<a href="https://yourblog.com/post123">

  <img 

    src="https://res.cloudinary.com/yourcloud/image/upload/w_800,c_fill,q_auto/blog-thumbnail.jpg" 

    alt="Read the post">

</a>Code language: HTML, XML (xml)

This version resizes the image to 800px wide, crops it to fill the space, and compresses it automatically.

Platform	How
HTML	<a href="..."><img src="..." alt="..."></a>
Email	Use inline styles, full URLs, and border="0"
Cloudinary	Add q_auto, f_auto, and transformations to the src URL
WordPress/Wix	Use visual editor’s link feature
New Tab	Add target="_blank" to the <a> tag

Hyperlinking an image is one of those HTML fundamentals that pays off across every platform, from websites to email newsletters.

With Cloudinary, you can take things even further: optimize image delivery, resize dynamically, and keep everything responsive and polished, without ever opening Photoshop.

Unlock the full potential of your digital content with Cloudinary’s advanced editing and optimization tools. Sign up for free today!