HTML Image Link Guide: Create Clickable Images

The Basic Clickable Image HTML

Place the img element inside the a element:

<a href="https://example.com/products/desk-lamp">
  <img
    src="https://cdn.example.com/images/desk-lamp.webp"
    alt="Brass desk lamp"
  />
</a>

The anchor makes the picture clickable. The image element loads the file. Neither value can replace the other: a valid image URL does not tell the browser where the click should go, and a page URL usually cannot be rendered as an image.

href vs. src

An ecommerce workflow can make the distinction concrete. Product photos, screenshots, and detail images may be stored or referenced through URLs in Shopify, an independent storefront, or a product description. In the HTML, that image URL belongs in src so the correct visual loads. The href is separate: it might open the product page, collection, or details page when someone clicks. If Shopify or another platform already supplies a usable image URL, use that URL; Photo2URL is an option only when you need to turn a local image into a direct public URL.

Use Descriptive alt Text

Alt text is the text equivalent of an image. It appears when the image cannot load and is announced by screen readers. For a clickable image, it also normally becomes the accessible name of the link.

<a href="/reviews/aurora-headphones">
  <img
    src="/images/aurora-headphones.webp"
    alt="Aurora wireless headphones review"
  />
</a>

Avoid phrases such as "image" or "click here" because they do not explain the purpose of the link. If the surrounding text already describes the destination and the image is purely decorative, use empty alternative text: alt="".

Absolute vs. Relative Image URLs

An absolute URL includes the protocol and domain, such as https://cdn.example.com/photo.jpg. A relative URL is resolved against the current site, such as /images/photo.jpg.

• Use an absolute URL when the image is hosted on another domain or must work in email, documentation, feeds, or external embeds.
• Use a relative URL when the image is part of the same site and should move with that site's domain.
• Use a CDN-backed absolute URL when you want one stable image address that can be reused across websites, Markdown, and applications.

If the image is still local, create the hosted address first with Image to URL. The image to URL guide walks through the upload and copy steps.

Opening an External Link in a New Tab

Opening a new tab can be useful for reference material, but it takes navigation control away from the visitor. Use it sparingly. When it is appropriate, include both target and rel:

<a
  href="https://example.com/reference"
  target="_blank"
  rel="noopener noreferrer"
>
  <img src="https://cdn.example.com/images/reference.webp" alt="Reference guide">
</a>

noopener prevents the new page from accessing the original page through window.opener. noreferrer also prevents the destination from receiving referrer information in browsers that honor it.

Responsive Clickable Image CSS

Images often have fixed intrinsic dimensions that are wider than a mobile viewport. A small CSS rule prevents overflow:

<style>
  .image-link img {
    display: block;
    max-width: 100%;
    height: auto;
  }
</style>

<a class="image-link" href="/products/desk-lamp">
  <img src="/images/desk-lamp.webp" alt="Brass desk lamp">
</a>

Do not remove the image's intrinsic aspect ratio by setting both a fixed width and a fixed height. Let the browser scale the height automatically unless the design requires cropping.

Clickable Image vs. Image Embed

A plain img element displays a picture but does not create a hyperlink. Wrapping it in an a element adds a destination. In Markdown, the equivalent distinction is ![alt](image-url) for a plain image and [![alt](image-url)](destination-url) for a linked image.

If you need to compare the terminology first, read image URL vs image link. If you need the complete beginner workflow, use How to Link an Image.

Common HTML Image Link Mistakes

• Putting a page URL in src. The browser expects image bytes, so an HTML page will fail to render as a picture.
• Putting an image URL in href. This opens the image directly instead of the intended destination page.
• Omitting alt text. Screen-reader users may hear only the URL or an unhelpful generic label.
• Nesting interactive elements. Do not put a button inside a link or a link inside another link.
• Using target="_blank" everywhere.Reserve new tabs for cases where they genuinely help.
• Assuming a preview means the final page works. Test the rendered markup in the destination CMS, email client, or framework as well.

Generate the HTML Image Link

If you already have an image URL and a destination URL, the HTML Image Link Generator creates the complete anchor and image markup for you. To embed an image in Markdown instead, use the Markdown Image Link Generator.