How to Create Image Links on Your Blog

WordPress

For most bloggers, the only real piece of code you need to know is how to add image links. Ads, buttons, profile pictures, or featured categories use image links. If you want to add a profile picture that links to your about page, this tutorial is for you!

How to Create Image Links

What are image links?

Image links are any image which links to a different web page (URL). These hyperlinks are images that you can click on, and they take you to another web address. Tags represent hyperlinks. 

<a href="URL OF LINK"><img src="IMAGE URL" alt="Description of Image"></a>

HTML Basics:

  • href attribute specifies where the link is going
  • <img> attribute specifies what the link will look like, in this case, an image!
  • “alt” describes the image for screen readers and allows you to improve your SEO (ever so slightly) by assigning text to the picture.

How do I create image links?

To create images links you will need the following:

  • URL OF LINK: where you want the image to link to
  • IMAGE URL: When uploaded to your site, all images have a URL associated with them. Your image should be sized appropriately. If this is an image to be used in the sidebar, you want it to be approximately 300px wide (but this depends on your theme).

INSTRUCTIONS:

  1. Upload your image to your WordPress Dashboard, by going to MEDIA < ADD NEW.
  2. Once you upload the image, select EDIT.
  3. A new window will pop up with information about your image, including the URL. Copy this URL it is your IMAGE URL.
  4. Using the structure below, replace – URL OF LINK, IMAGE URL, and Description of Image with the respective examples. I’ve included an example below.
<a href="URL OF LINK"><img src="IMAGE URL" alt="Description of Image"></a>

Replaced with Examples:

<a href="https://www.lindsayhumes.com/downloads"><img src="https://www.lindsayhumes.com/wp-content/uploads/2015/05/white-oak-blog-shop-250.png" alt="White Oak Creative Blog Shop"></a>

If you want your image to open in a new window, set the target for the link. Add target=”_blank” to your <a href> attribute. If you do not set a target, the link will open in the same browser.

<a href="https://www.lindsayhumes.com/downloads" target="_blank"><img src="https://www.lindsayhumes.com/wp-content/uploads/2015/05/white-oak-blog-shop-250.png" alt="White Oak Creative Blog Shop"></a>

You’re set!

With that example, you still might prefer something code-free. That’s fine! Jetpack comes with an Image Widget feature that allows you to add specific information and links to your image.

You might also like Optimizing Images to Improve Your Blog’s Performance and Best Websites for Stock Photographs.

Want more Blog Design tutorials? Check out these posts!

 

How to Create Image Links