How to Make an Image Link in HTML

An image link combines an image and a hyperlink into one clickable element

To make an image link, you nest an <img> tag inside an <a> tag. The <a> tag creates the link destination, and the <img> tag displays the image that visitors click on. When someone clicks the image, the browser goes to the URL you specified in the <a> tag's href attribute.

The basic structure looks like this:

The order matters: the <a> tag wraps around the <img> tag, not the other way around. This tells the browser that the image is the clickable part of the link.

Key Takeaways

Place the <img> tag inside the <a> tag, with the href attribute in the <a> tag pointing to where you want the link to go.
Always include an alt attribute on the image that describes what the image shows, so screen readers and search engines understand the link's purpose.
You can add width and height attributes to the <img> tag to control how large the image displays on the page.
Image links work the same way as text links — they can point to external websites, pages within your own site, email addresses, or downloadable files.

The complete syntax with all common attributes

Here is a full example with the attributes you will use most often:

The src attribute tells the browser where to find the image file. Use a relative path if the image is in a folder on your own site (images/logo.jpg) or an absolute URL if the image is hosted elsewhere (https://example.com/logo.jpg).

The alt attribute is required and should describe the image in a way that makes sense if someone cannot see it. This text appears if the image fails to load, and screen readers read it aloud to visitors using assistive technology. For an image link, the alt text should explain what happens when you click — for example, "Link to home page" rather than just "Logo".

The title attribute on the <a> tag is optional and shows a tooltip when someone hovers over the link. The width and height attributes on the <img> tag control the image size in pixels.

Linking to different destinations

The href attribute in the <a> tag accepts the same kinds of destinations as any other link. To link to an external website, use the full URL starting with http:// or https://:

To link to another page on your own website, use a relative path:

To link to a specific section of a page, use a hash symbol followed by the section's id:

To create a link that opens an email client, use mailto: followed by the email address:

Styling image links with CSS

By default, image links often display with a colored border around them. You can remove this border or change the link's appearance using CSS. Add a class or id attribute to the <a> tag and then write CSS rules for it:

In your CSS file or <style> block, you can remove the border, change how the link looks on hover, or add effects:

.logo-link { border: none; } .logo-link:hover { opacity: 0.8; }

The :hover selector lets you define what happens when someone moves their mouse over the link. The opacity property makes the image slightly transparent, which gives visual feedback that the link is clickable. You can also use transform: scale() to make the image grow slightly, or filter to change the image's brightness or color.

Common mistakes to avoid

The most frequent error is putting the <a> tag inside the <img> tag instead of the other way around. This breaks the link. Remember: the <a> tag is the container, and the <img> tag goes inside it.

Another mistake is forgetting the alt attribute or leaving it empty. Screen readers will announce "image" with no description, which confuses visitors and makes the link's purpose unclear. Write alt text that describes what the image shows and what clicking it does.

Using an image file that is too large in file size will slow down your page. Before adding an image to your website, compress it using a tool like TinyPNG or ImageOptim so it loads quickly. A logo or button image should usually be under 100 kilobytes.

Do not use an image as a link if the same link already exists as text elsewhere on the page. This creates duplicate links and confuses search engines about which version is the "real" link.

Frequently Asked Questions

Can I make an image link open in a new tab?

Yes. Add the target="_blank" attribute to the <a> tag: <a href="https://example.com" target="_blank"><img src="image.jpg" alt="Link"></a>. The rel="noopener noreferrer" attribute is also recommended for security when linking to external sites.

What image formats work best for image links?

JPG, PNG, and WebP all work. JPG is best for photographs, PNG for images with transparent backgrounds or sharp text, and WebP for smaller file sizes. Avoid BMP and TIFF on websites — they are too large and browsers do not display them well.

Do I need to set a specific image size for a link?

No, but it is a good idea. Setting width and height prevents the page layout from shifting while the image loads. If you only set one dimension, the browser automatically scales the other to keep the image proportional.

What happens if the image file is missing or broken?

The browser displays the alt text instead, and the link still works. Visitors can click the alt text to follow the link. This is why descriptive alt text matters — it becomes the visible link if the image fails to load.

Can I use an image as a link inside a button element?

You can, but it is not necessary. A button element is for form submissions, not navigation. For navigation links, use the <a> tag with an image inside. If you want a button-like appearance, style the <a> tag with CSS instead.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.