How to Make an Image Clickable in HTML

Basic Method: Wrap Image Inside an Anchor Tag

The recommended way to make an image clickable is to wrap the <img> tag inside an <a> tag.

<a href="https://wpdevelopertips.in">
  <img src="image.jpg" alt="WPDeveloperTips">
</a>

Open Clickable Image in a New Tab

To open the linked image in a new tab, use target="_blank" with security attributes.

<a href="https://wpdevelopertips.in" target="_blank" rel="noopener noreferrer">
  <img src="image.jpg" alt="Visit WPDeveloperTips">
</a>

Make an Image Clickable for File Download

You can also use images as download buttons using the download attribute.

<a href="brochure.pdf" download>
  <img src="download.png" alt="Download Brochure">
</a>

Clickable Image with Pointer Cursor

Adding a pointer cursor improves user experience.

<a href="/contact">
  <img src="contact.png" alt="Contact Us" style="cursor: pointer;">
</a>

Accessibility Best Practices

Always include descriptive alt text that explains the action performed by clicking the image.

<a href="/pricing">
  <img src="pricing.png" alt="View Pricing Plans">
</a>

SEO Tip

• Search engines treat clickable images as links
• The alt attribute works like anchor text
• Use meaningful keywords in alt text

Common Mistakes to Avoid

Using JavaScript for Navigation

<img src="image.jpg"
     onclick="window.location='page.html'">

This approach is not recommended due to accessibility and SEO issues.

Missing Alt Attribute

<a href="page.html">
  <img src="image.jpg">
</a>

Responsive Clickable Images

Ensure images are responsive on mobile devices.

<a href="page.html">
  <img src="image.jpg"
       alt="Sample Image"
       style="max-width:100%; height:auto;">
</a>