How to Link an Image on Your Website

Websites are unlike any communication medium that came before them. One of the main things that set websites apart from previous media formats like print, radio, and even television is the concept of the hyperlink.

Hyperlinks, also commonly just known as "links", are what make the web so dynamic. Unlike a printed publication that can reference another article or other resource, websites can use these links to actually send visitors to those other pages and resources. No other broadcast medium can do this. You can hear an ad on radio or view on TV, but there are no hyperlinks that can take you to the companies in those ads the way that a website can easily do. Links really are an amazing communication and interaction tool.

Oftentimes, the links that are found on a website are text content that directs visitors to other pages of that same 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.

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. This is a good choice since it will allow our image to scale for different resolutions, all the while maintaining image quality and small overall file size.

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. This is similar to how you would link text, only instead of wrapping the words you want to be a link with the anchor tags, you wrap the image. In the 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 and maintain a clean separation of HTML structure and CSS styles.

Once you do get to CSS, the styles you write to target this logo graphic 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 additional "hooks" to use with your CSS styles.

So adding an image link is pretty easy. As we have just seen, all you must do is wrap the image with the appropriate anchor tags. Your next question might be "when would you actually do this in practice besides the aforementioned logo/homepage link example?"

Here are some thoughts:

• 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 e-commerce 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 (best practices note — from a website performance perspective, buttons styled purely with CSS are a better choice than image buttons).

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 be 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. This may seem like a lot of work just to add images, but the payoff is worth it! Images really can add so much to a site's success.

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.