Images attract attention. The right images on your website can capture customer interest, encourage return visits, and increase the chances of successful sales conversion. But they can also serve a secondary purpose by acting as links to critical content, interesting information, or even off-site resources.

But how do you make a picture into a link? In this piece, we’ll explore potential reasons for image/link interconnection, best practices when linking an image, and offer a step-by-step guide for how to make a picture into a link using HTML.

Download Now: Free Intro Guide to HTML & CSS

Why Make a Picture Into a Link?

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

This isn’t to say that text has no relevance. Search engine spiders 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 current pricing.

But there’s also 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 room than the image itself, meaning users must do more work to successfully make the click. This is especially problematic for users accessing non-optimized websites on mobile devices — if images and text don’t scale properly they’ll often find it difficult to accurately tap on the link they want.

By leveraging link integration, however, site owners can ensure that both images and text descriptions lead to the same place, in turn lowering the chances of misclicks that result in unexpected page loads and user site abandonment as they become frustrated trying to find what they’re looking for.

How to Make a Picture Into a Link Using HTML

If you’ve decided to make a picture into a link, there’s an obvious next question: How?

Here’s our step-by-step guide to making an picture into a link using HTML:

Step 1: Select your image.

First, find the image you want to use. If it’s an image of a product on your website chances are you already have several pictures — use the one that offers the cleanest, clearest view. 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, make sure to either pay for image rights or use license-free stock imagery.

Step 2: Optimize size and scale.

Before uploading your photo to your web hosting server, it’s worth optimizing size and scale. Larger images will slow down site loading times and may not scale properly, so it’s worth looking at the size of any current images to inform new image size guidelines and scaling down the data volume of your image using compression software.

Step 3: Upload your image and get the URL.

Next, you need to upload your image to your web hosting provider. This may be a CMS platform or a website hosting service, but regardless of how your image is hosted, it must be uploaded onto the web so you can obtain its location URL — the place your HTML code will “look” for your image to display it properly.

Step 4: Specify your destination URL.

Now 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.

Step 5: Create your HMTL code.

It’s time to create your HTML code. Here’s the basic structure:

 

<a href="LandingPageURL">

<img src="ImageURL" alt="text describing the image">

</a>


The “a” and “/a” tags indicate the presence of a link, while the “img” tag references your specific image. In the example above, your destination URL replaces the LandingPageURL text in the quotation marks, while its location URL replaces the ImageURL text.

It’s also a good idea to fill out the alt text description, which can be read by screen readers used by visually-impared users and will also display if the image cannot be loaded. As a result, simple and straightforward alt text is a critical part of HTML image links.

Step 6: Paste your code as needed.

Armed 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 end result should be a clickable image that takes users to a specific destination URL.

Sight Unseen: Image Linking Best Practices

Humans generally prefer the path of least resistance. It’s why we want faster Internet, why AI adoption is expanding and why algorithms are designed to give us the content we want, when we want it, based on our previous browsing behavior.

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 must be logically connected. In practice, this means that if your image is a picture of a specific clothing item but the link takes users to the general category, potential customers will quickly get frustrated. Here, the rule for links-as-pictures is simple: What you see is what you get.

Offer a Backup

First-generation links were obvious, unattractive and easily spotted thanks to their garish blue color and bold underlines. The paradox? Despite substantive improvements in HTML and other markup languages that make much more subtle and streamlined links possible, many users are conditioned to recognize the traditional link format immediately. The result? It’s worth offering a familiar, text-based backup to any image link that users will instantly understand.

Limit Your Links

Too many links on any site page spells 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. 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. 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.

New Call-to-action

 css introduction

Originally published Dec 25, 2020 7:00:00 AM, updated October 08 2021

Topics:

Content Management System