What it means to link an image
A link from an image means making a picture clickable so that when someone clicks it, they go to a different webpage or file. The image itself stays visible on the page — it just becomes a button that takes you somewhere else when you tap or click it.
This is different from downloading an image or saving it to your computer. The link is the destination the image points to. You see this all the time: a company logo that takes you to the homepage, a thumbnail photo that opens a larger version, or a banner ad that goes to a product page.
The technical term for this is wrapping an image in a hyperlink, but you do not need to know that phrase. What matters is understanding that images can work like buttons, and knowing how to create that yourself if you are building a website or editing a page.
Key Takeaways
- An image link is created by placing an image tag inside a link tag in HTML, making the picture clickable.
- The link destination (the URL) goes in the href attribute, and the image file path goes in the src attribute.
- Most website builders and content editors have a button or menu option to link an image without writing code.
- You can link an image to a webpage, a PDF, an email address, or a file read depending on what you want the click to do.
How to create an image link in HTML
If you are writing HTML code directly, the structure is straightforward: you put an image tag inside a link tag. The link tag tells the browser where to go, and the image tag tells it what picture to show.
The code looks like this:
<a href="https://example.com"><img src="image.jpg" alt="Description of image"></a>
The href is the destination — the webpage or file the image points to. The src is the path to the image file itself. The alt text describes the image for people using screen readers and for search engines. If the image does not load, the alt text appears instead.
If your image file is in the same folder as your HTML file, you can just write the filename: src="photo.jpg". If it is in a subfolder called images, write src="images/photo.jpg". If it is on another website, use the full web address: src="https://example.com/photo.jpg".
Using a website builder or editor to link an image
If you use WordPress, Wix, Squarespace, Google Sites, or any other website builder, you do not need to write code. These platforms have buttons and menus that do the work for you.
The process is usually: insert or upload your image, then right-click it or look for a link icon in the toolbar. A dialog box will appear asking where you want the image to link to. Type or paste the destination URL, then save. The image is now clickable.
In WordPress, click the image, then look for a link icon in the toolbar above the editor. In Google Docs or Slides, right-click the image and choose "Link". In most platforms, you can also select the image and use a keyboard shortcut like Ctrl+K (Windows) or Cmd+K (Mac) to open the link dialog.
What you can link an image to
An image can point to almost any destination. The most common are webpages — you click a logo and go to the homepage. But images can also link to PDFs, image files, email addresses, or downloads.
If you want the click to open an email program, use href="mailto:name@example.com". If you want it to read a file, point to the file itself: href="document.pdf" or href="spreadsheet.xlsx". If you want it to open a larger version of the same image, link to the full-size image file instead of a webpage.
You can also link to a specific section of a page using an anchor. If a page has a section marked with id="section2", you can link directly to it: href="https://example.com#section2". This is useful for long pages where you want the click to jump to a particular part.
Making image links work on mobile and accessible to everyone
Image links work the same way on phones and tablets as they do on computers, but you should test them on a small screen to make sure they are straightforward to tap. A link that is too small or too close to other links can be frustrating to click on a phone.
Always include descriptive alt text. This helps people using screen readers understand what the image is and where it goes. Instead of alt="image" or alt="button", write something like alt="Link to our homepage" or alt="Open full-size photo". The alt text should tell someone what they will see or where they will go if they click.
You can also add a title attribute to show a tooltip when someone hovers over the image on a computer: title="Click to learn more". This gives sighted users a hint that the image is clickable.
Common problems and how to fix them
The most common issue is a broken link — the image shows up but clicking it does nothing or shows an error. This usually means the href URL is wrong or the page no longer exists. Check that you copied the full web address correctly, including the https:// part.
Another issue is a missing image — you see a broken image icon instead of the picture. This means the src path is wrong. If the image is on your computer, make sure the filename and folder path are spelled exactly right, including capital letters. If the image is on another website, make sure you have permission to use it and that the URL has not changed.
If the image link is not clickable, check that the image tag is actually inside the link tag in your code. If you accidentally put the link tag inside the image tag, it will not work. The link tag must be on the outside, wrapping the image tag.
Frequently Asked Questions
Can I link an image to open in a new tab or window?
Yes. Add target="_blank" to the link tag: <a href="url" target="_blank"><img src="image.jpg"></a>. This opens the destination in a new tab instead of replacing the current page. In most website builders, there is a checkbox for "open in new tab" when you set up the link.
What image file types work for links?
Any image format works: JPG, PNG, GIF, SVG, WebP, and others. The format does not affect whether the image can be linked — it only affects file size and image quality. PNG is good for graphics and logos, JPG for photographs, and SVG for images that need to scale to any size.
Can I link part of an image instead of the whole thing?
Not directly with a single image. If you want different parts of one image to link to different places, you need to use an image map (a more advanced HTML technique) or split the image into separate pieces. Most of the time it is simpler to use separate images or buttons instead.
Does linking an image affect how search engines see it?
Yes, slightly. Search engines use the alt text and the link destination to understand what the image is about. If you link a logo to your homepage, the alt text should describe the logo or company, not just say "logo". This helps search engines understand the context.
What happens if the image file is deleted after I create the link?
The link still works, but the image will not display — visitors will see a broken image icon instead. The link destination is separate from the image file, so deleting the image does not break the link itself. You would need to upload a new image and update the src path to fix it.