What it means to link from an image
A link from an image means turning a picture into a clickable element that takes someone to another page or website when they click on it. Instead of clicking text that says "Learn more", a visitor clicks the image itself. The image still looks like a normal picture — there's no visible difference — but underneath, it's connected to a URL.
This is useful when you want a visual element to do the job of a text link. A logo might link to your homepage. A product photo might link to the shopping page. A screenshot might link to a tutorial. The image becomes the clickable area.
Key Takeaways
- The simplest way to link an image is to wrap it in an anchor tag: <a href="URL"><img src="image.jpg"></a>
- The href attribute inside the anchor tag holds the destination URL, and the img tag holds the image file path.
- Most website builders and content management systems have a button or menu option to link images without writing code.
- You can style the linked image with CSS to add effects like hover states or borders that show it's clickable.
Linking an image in HTML
If you're writing HTML directly, the method is straightforward. You place an image tag inside an anchor tag. The anchor tag is what creates the link, and the image tag is what displays the picture.
The basic structure looks like this: <a href="https://example.com"><img src="image.jpg" alt="Description"></a>
The href attribute in the anchor tag is where you put the URL you want the image to link to. The src attribute in the image tag is the file path or URL of the image itself. The alt attribute describes the image for people using screen readers and for search engines — it's important for accessibility and should say what the image shows, not "click here".
If your image file is in the same folder as your HTML file, you can just write the filename: src="photo.jpg". If it's in a subfolder called "images", write src="images/photo.jpg". If it's hosted elsewhere, use the full URL: src="https://example.com/photo.jpg"
Linking images in WordPress, Wix, and other builders
Most website builders don't require you to write code. In WordPress, upload or select your image in the editor, then click the image and look for a link icon or "Link" button in the toolbar. A dialog box will open where you paste the destination URL. Click "Apply" and you're done.
In Wix, select the image, right-click it, and choose "Add a Link" from the menu. Paste your URL and confirm. Squarespace works similarly — select the image, then use the "Link" option in the sidebar panel on the right.
In Google Sites, click the image, then click the link icon that appears. Paste your URL and press Enter. The process is nearly identical across most modern builders — find the image, look for a link button or option, and enter your destination URL.
Making it clear the image is clickable
By default, a linked image looks exactly like an unlinked image. Visitors might not realize they can click it. You can add visual cues using CSS or your builder's styling options.
A common approach is to add a border or change the opacity when someone hovers their mouse over the image. In CSS, this looks like: a img:hover { opacity: 0.8; border: 2px solid blue; } This makes the image slightly transparent and adds a blue border when the cursor is over it, signaling that it's clickable.
In WordPress, Wix, and other builders, you can often add these effects through the design panel without writing code. Look for "hover effects" or "interactive" options in the image settings. Some builders let you add a subtle zoom or shadow effect on hover, which also signals interactivity.
Linking to different types of destinations
The URL in your href attribute can point to many places. href="https://example.com" links to another website. href="/about" links to another page on your own site (the forward slash means "from the root of this site"). href="#section2" links to a section on the same page — useful for a table of contents or navigation.
You can also link to an email address: href="mailto:name@example.com" opens the visitor's email client. Or link to a phone number: href="tel:+1-555-0123" initiates a call on mobile devices. These are less common for images, but they work the same way.
If you want the link to open in a new tab instead of replacing the current page, add target="_blank" to the anchor tag: <a href="URL" target="_blank"><img src="image.jpg"></a>
Common mistakes and how to avoid them
The most frequent error is a broken image path. If your image doesn't appear, the src attribute is pointing to a file that doesn't exist or is in the wrong location. Double-check the filename, including capitalization and file extension (.jpg, .png, .gif). If the image is in a subfolder, make sure you've included the folder name in the path.
Another mistake is forgetting the alt attribute. This leaves screen reader users without a description of the image, and it can hurt your search engine visibility. Always include alt text that describes what the image shows or what clicking it does.
A third issue is making the image too small to click comfortably. If your linked image is only 20 pixels wide, visitors will have trouble clicking it, especially on mobile devices. Aim for at least 44 pixels in width and height for any clickable element.
Testing your linked image
After you've created the link, test it. Click the image in your browser and confirm it goes to the right place. If you used target="_blank", confirm it opens in a new tab. Check on both desktop and mobile — the image should be clickable on both.
If you're using a builder, preview your site before publishing. If you're writing HTML, open the file in a browser to test. Broken links are one of the most common issues visitors encounter, so taking a minute to verify saves frustration later.
Frequently Asked Questions
Can I link an image to a PDF or downloadable file?
Yes. Use the file path or URL in the href attribute just as you would for a web page: href="document.pdf" or href="https://example.com/file.zip". When someone clicks the image, the browser will either open the file or prompt them to download it, depending on their browser settings.
What's the difference between linking an image and making an image a button?
Technically, a linked image is already functioning as a button — it's clickable and does something when clicked. In web design, "button" usually refers to a styled element that looks like a physical button, while a linked image just looks like a picture. The underlying code is similar, but buttons are often styled with CSS to have a raised or pressed appearance.
Does linking an image affect how search engines see it?
Search engines follow links from images the same way they follow text links. The alt text on the image helps search engines understand what the image shows. If you're linking your logo to your homepage, that's normal and expected. If you're linking many unrelated images to the same page, search engines may view it as an attempt to manipulate rankings, so keep your linking strategy natural.
Can I link different parts of the same image to different URLs?
Not with a simple image link — clicking anywhere on the image goes to the same destination. If you need different areas of one image to link to different places, you'd use an image map, which is more complex. For most situations, it's simpler to split the image into separate files and link each one individually.
What if I want the linked image to have a caption?
Wrap both the image and the caption text in the anchor tag: <a href="URL"><img src="image.jpg"><p>Caption text</p></a>. Now clicking either the image or the caption text goes to the same link. You can style the caption with CSS to position it below or overlay it on the image.