How to Link an Image on Your Website

Using the HTML anchor element to add a link to a website image

Web designer working in her studio
Nicola Tree/Digital Vision/Getty Images

Hyperlinks, also commonly just known as "links", are what make the Web so dynamic. Unlike a printed publication that can reference another articles or other resource, websites can use these links to actually send visitors to those other pages and resources. 

Oftentimes, the links on a website are text content that direct visitors to other pages of the site. A website's navigation is one example of text links in practice, but links do not need to be text-based.

You can also easily link images on your website. Let's look at how this is done, followed by some instances where you would want to use image-based hyperlinks.

How to Link an Image

The first thing you will need to do is to place the image itself in your HTML document. A common use of an image-based link is the site's logo graphic which is then linked back to the site's homepage. In our example code below, the file we are using is an SVG for our logo.

Here's how you would place your image in the HTML document:

<img src="logo.svg" alt="Our Company logo">

Around the image tag, you would now add the anchor link, opening the anchor element before the image and closing the anchor after the image. In our example below, we are linking back to our site's homepage, which is "index.html".

<a href="index.html"><img src="logo.svg" alt="Our Company Logo">

When adding this HTML to your page, don't put any spaces between the anchor tag and the image tag.

If you do, some browsers will add little ticks beside the image, which will look odd.

The logo image would now also act as a homepage button, which is pretty much a web standard these days. Notice that we do not include any visual styles, such as the width and height of the image, in our HTML markup.

We will leave these visual styles to CSS. These styles could include sizing the image, including responsive styles for multi-device friendly images as well as any visuals you like to add to the image/link, like borders or CSS drop shadows. You could also give your image or link a class attribute if you needed additonal "hooks" to use with your CSS styles.

Use Cases for Image Links

So adding an image link is pretty easy, but when would you actually do this in practice beside the aforementioned logo / homepage link example?

  • Thumbnail images in a gallery that link to larger versions of those images. 
  • Images that are used alone to represent content, like product photos for an Ecommerce website
  • Teaser images that are part of other content, like a blog article or press release, that entice people to notice that content give them a target area to tap or click to read the full article
  • Icon images that are used as buttons to connect to specific functionality or pages within the site
  • Social media links that use the recognizable logos of the various social media sites that are important to that site or company
  • Images used as buttons for certain functionality, like form submissions (note - from a website performance perspective, buttons styled purely with CSS are a better choice than image buttons)

    A Reminder When Using Images

    Images can play an important role in a website's success. One of the examples given above mentioned using images alongside other content to draw attention to that content and get people to read it. When using images, you must me mindful of selecting the right image for your needs, this includes the correct image subject matter, format, and also making sure that any images that you use on your website are properly optimized for website delivery

    Do not hesitate to use appropriate images on your site, and link those images when needed to add some interactively to your content, but also be mindful of these image best practices and use these graphics / links correctly and responsibly in your web design work.

    Edited by Jeremy Girard