How to Make an Image a Link in WordPress

Want to turn a WordPress image into a clickable destination? Making a picture act as a link is one of the simplest ways to improve user engagement on your site. A connected picture gives visitors a larger tap target than plain text, which matters on mobile devices. It also keeps your layout clean by combining visual content with navigation. In this tutorial, you’ll learn the block editor method, the HTML method, and a few tips for getting it right every time.

Why Turn a Picture Into a Clickable Hyperlink?

A wrapped picture creates a bigger click area than a text hyperlink alone. Visitors on phones won’t need to pinch and zoom to hit a tiny anchor. That single change can reduce bounce rates noticeably.

Pictures grab attention faster than words. News sites, e-commerce stores, and bloggers all rely on this behavior. When the visual itself leads somewhere useful, you’re guiding readers without extra friction.

There’s an SEO benefit too. Search engines read alt text, and wrapping a picture in a hyperlink passes context to the destination URL. Descriptive alt text plus a relevant destination helps search engine optimization for both pages.

How to Add a Hyperlink to an Image in the Block Editor

The Gutenberg block editor (WordPress 5.0 and later) makes this straightforward. Follow these steps:

1. Open the post or page in the WordPress dashboard and select the picture you want to modify.
2. Click the toolbar icon that looks like a chain (the insert hyperlink button) above the selected block.
3. Paste your destination URL into the field, or start typing a page title to search your own site.
4. Toggle “Open in new tab” if you’re pointing to another website so visitors don’t leave your page.
5. Hit Enter or click the apply icon, then save or update the post.

That’s it. Five clicks and your picture now navigates wherever you need. You can use this for internal navigation, call-to-action buttons, affiliate offers, or directing users to a button or page on your site.

Using HTML to Insert a Clickable Picture Manually

If you prefer working with code, switch to the Code Editor in WordPress or use a Custom HTML block. The markup is simple:

<a href="https://yoururl.com/product-page-url">
<img src="ImageURL.jpg" alt="text describing the image">
</a>

The anchor tag wraps the img element. Set the href attribute to your destination URL. Fill in a descriptive, keyword-rich alt text for accessibility and SEO. Save the post, preview it, and confirm it responds to clicks.

One mistake I see repeatedly: forgetting the closing </a> tag, which can turn your entire page into one giant hyperlink. Always double-check your markup before publishing.

Optimizing Your Files Before You Upload

Before you add any clickable picture, get the file ready. Compress JPEG files that contain detailed photographs, and use PNG format for icons, graphics, or screenshots with text. Keeping quality above 70% prevents visible pixelation while cutting load time.

Large files slow down your site. Run them through a free tool or a WordPress plugin before uploading them to the media library. If you’re still learning WordPress, start with built-in settings for thumbnail sizes and work from there.

Can a JPEG or PNG Have an Embedded Hyperlink?

No. Neither JPEG nor PNG files can store a hyperlink inside the file itself. Only document formats such as PDF, Word, or Excel support embedded tappable URLs. For any picture on the web, you wrap it in HTML or use the WordPress editor’s built-in functionality to assign the destination after upload.

Adobe Photoshop’s Slice Tool can split a JPEG into regions and export an HTML file with different hyperlinks per slice, but that technique is rarely used on modern WordPress sites. The block editor or Elementor handles this far more cleanly.

Frequently Asked Questions About Clickable Images

How do I make a picture open in a new tab when clicked?

Select it in the editor, click the chain icon, paste or search for the URL, then toggle “Open in new tab” before applying. This keeps your current page open while the destination loads in a separate browser tab.

Can I add a custom URL to gallery items?

The default WordPress gallery block does not support custom URLs on individual items. Use a plugin like FooGallery or a page builder such as Elementor to assign a custom URL and navigate visitors to specific pages from each gallery entry.

Does wrapping a picture in a hyperlink hurt page speed?

No. Adding an anchor tag around it adds a few bytes of HTML. It has zero measurable impact on load time. The file size itself is what affects speed, not the surrounding markup.

Whether you’re setting up call-to-action buttons, directing readers to related posts and pages, or building a custom gallery with clickable items, you now know how to make an image a link in WordPress with both the visual editor and raw HTML.