How to Make a Picture Into a Link

High-quality images on a website can capture customer interest, increase the chances of successful sales conversion, and encourage return visits. Making an image into a link can do even more by directing visitors to critical content, interesting information, or off-site resources.

But how do you make a picture into a link? In this post, we’ll explore reasons for linking images and best practices to follow. Then, we'll walk through a step-by-step guide for making an image clickable using some simple HTML.

Why make a picture into a link?

There are two main reasons to make a picture into a link: to capture users' attention and to provide a larger area for users to click or tap.

1. To Capture Attention

Images draw more attention than text. It’s why news articles offer pictures of key events, why app stores use screenshots, and why e-commerce sites include product images along with descriptions.

There's data to back this up, too: According to research, social media posts and blog posts with frequent images see higher engagement and shares than posts without images, and humans are more likely to retain information if paired with visuals. As web design evolves, images are here to stay.

This isn’t to say that text is irrelevant. though. Search engines are continuously crawling for context-aware text content on your website, and images are traditionally more difficult to analyze for site impact, making text-based descriptions of products or services essential for effective SEO.

For many sites, however, it’s the combination of these two media types that delivers the best result. The most familiar example is a product page that includes an image of what’s being sold along with a clear description that includes key features, specific components, and pricing.

2. To Create Larger Clickable Areas

There’s another common use case here that combines images and text: Category descriptions that include multiple products. In this case, the information offered is minimal — visitors typically see the item’s description along with its price and a high-quality image. This combination is repeated over and over across the page for other products in the same category or in a similar price range.

Situations like this offer the most compelling argument for making a picture into a link because it helps streamline customer interaction. Consider a page with multiple products that each contain an under-image text link. In most cases, the link text takes up significantly less space than the image, meaning users must do more work to click it.

This is especially challenging for users accessing non-optimized websites on mobile devices. If images and text don’t scale properly, users will find it difficult to accurately tap the link they want.

By leveraging image links, site owners ensure that both images and text descriptions lead to the same place, in turn lowering the chances of "misclicks" that result in unexpected pages and site abandonment as users become frustrated.

Take this example from Briogeo: Each product listing features a large image that also serves as a link to the product page.

Image Source

How to Make a Picture Into a Link Using HTML

Now that you understand the benefits of turning an image into a link, there’s an obvious next question: How?

If you're a visual learner, check out this video tutorial:

Or follow our step-by-step guide to linking an image using HTML below.

Step 1: Select your image.

First, find the image you want to make a link. If it’s an image of a product on your website, chances are you already have several pictures. Use the one that best showcases the product.

If you don’t have a photo, you can either take and upload a high-quality photo or use an existing web image. When it comes to repurposing images already on the web, however, be sure to either pay for image rights or use a license-free stock image.

Below an example of an image that showcases the HubSpot flywheel. This can be turned into a link to a landing page on HubSpot's website.

Image Source

Step 2: Optimize size and scale.

Before uploading your photo to your web hosting server, it’s worth optimizing its size and scale. Larger image file sizes will slow down loading times and may not scale properly. Start by looking at the size of any existing images on your site to inform your image size guidelines and compress the image if necessary.

For example, on the HubSpot blog we use Squoosh, a free compression tool from Google. After uploading your image, you can adjust the quality based on what you want the final file size to be and choose the output format. Generally, the JPEG format is best for images with lots of detail (like photographs), while PNGs are better suited for icons, images of text, and graphics.

Image Source

Squoosh also lets you directly compare the quality of your uncompressed image to the quality of your compressed image. As you can see from the example above, our compressed photo may not be as crisp, but this probably won't be noticeable to visitors if the image link is small enough on the screen.

Ultimately, how much you want to compress your image is your call, but you'll typically avoid significant pixelation by keeping the quality above 70%.

Step 3: Upload your image and get the URL.

Next, you need to upload your image to your web server. This may be through your website builder or content management system, like CMS Hub. Or it may be through a free image hosting site like ImgBB.

Regardless of how your image is hosted, it must be uploaded onto the web so you can create its location URL — the place your HTML code will “look” for your image to display it.

Let's take the flywheel image above for example. This was uploaded to the HubSpot server and embedded on a landing page. Let's say you want to embed it as a clickable link in an external blog post. That way, readers that click on the image will be driven to HubSpot's website. In that case, you can go to that landing page, right-click the image, and select Copy Image Address.

This is the image address or location URL: https://www.hubspot.com/hs-fs/hubfs/HubSpot-English-Flywheel-Jul-27-2020-04-17-18-68-PM.png?width=1360&name=HubSpot-English-Flywheel-Jul-27-2020-04-17-18-68-PM.png. We'll use it later in our HTML. 

Step 4: Specify your destination URL.

Next, you need a destination URL, which specifies where your link will send users when they click on your image, such as a specific product or checkout page on your website.

As discussed above, let's make the destination URL "https://www.hubspot.com/flywheel".

Step 5: Create your HTML.

Now it’s time to create your HTML code. Here’s the basic template:

Let's break this down:

• The <a> and </a> tags represent a link.
• The anchor element (<a>) contains an href attribute. Replace "ProductPageURL" with the URL of the page you want people to be directed to when they click on the image.
• The <img> tag represents an image.
• The image element <img> contains a source attribute. Replace "ImageURL" with the URL of your image.
• It also contains an alt attribute. Replace the placeholder text with actual text describing the image.

It’s important to fill out the alt text description, which can be read by screen readers used by visually-impaired users, and will also display if the image cannot be loaded. Image alt text can also improve your SEO. As a result, simple and accurate alt text is a critical part of HTML image links.

Here's how the HTML code snippet for the HubSpot flywheel image might look:

Step 6: Paste your code as needed.

With your customized HTML code, you can now paste your linked image onto any page you have admin access to and that supports HTML.

If you’ve followed the steps correctly, the result should be a clickable image that takes users to a destination URL.

For example, here's the HubSpot flywheel image turned into a link in CodePen:

See the Pen Making a Picture into a Link by HubSpot (@hubspot) on CodePen.

Note: Clicking on the image in the CodePen module will result in an error message because it can't load an entire web page in the module. But if you hover over the image, you'll see the URL appear in the bottom-left corner of your screen. You can also right-click the image and select Open Link in a New Tab. The HubSpot Flywheel landing page will successfully open in the new tab.

Linking Image Best Practices

Humans generally prefer the path of least resistance. It’s why we want faster internet, and why content algorithms are designed to give us the content we want, when we want it.

These low-effort expectations also apply to websites: Sites that are aesthetically pleasing, easy to navigate, and simple to understand have the best chance of capturing visitor interest and increasing the chance of sales conversion.

For links-as-images, meanwhile, human nature suggests four best practices:

Keep It Simple

Links and images should be logically connected — the image should tell users where the link will take them before they click.

For example, if your image is a picture of a specific clothing item but the link takes users to the general category, potential customers may become frustrated. Instead, consider using an image containing several clothing items to serve as a link to a category page. Here's an example:

Image Source

Here, the rule for links-as-pictures is simple: What you see is what you get.

Offer a Backup Link

Classic text hyperlinks look somewhat outdated today, thanks to their garish blue color and underline.

The catch? Despite substantive improvements in HTML and other markup languages that make more subtle links possible, many users are conditioned to recognize the traditional blue link format.

As a result, it’s worth offering a familiar, text-based backup to any image link that users will instantly understand.

Limit Your Links

Adding too many links to a page will spell disaster, and this goes double for images. Not every picture needs its own link because not every piece of content on your site needs to link out to other pages or resources.

For example, in the blog post below, the image is not linked because the heading is linked to the page where the image is featured:

Image Source

In this case, purpose is the priority: Before you make any image into a link, ask a simple question: Why? If there’s no compelling reason, don’t make the change.

Regularly Review

Last but not least: Regularly review your links to ensure they’re still relevant. For example, if product lineups or prices change, old links may be out of date and send users to pages that are no longer relevant or return 404 errors.

This applies to all your page links, not solely image links or text links. Regular review helps ensure links are always active and applicable.

No Missing Links

Adding links to your pictures is a great way to improve user access and ensure they can find what they need, when they need it on your website. The caveat? Make sure your links are consistent, concise, and regularly updated to reflect current content.

Editor's note: This post was originally published in December 2020 and has been updated for comprehensiveness.