The 5-step guide is no longer actively updated.
I recommend Project 24. (My review is here.)

How to use images

by

I may be paid via affiliate links below. More here.

Before using images in any way — on your website or elsewhere — make sure it’s legal to use and is prepared properly.

Is your image legal to use?

Many people assume any image on the internet is free to use. Not so. Images are copyrighted. Do not use them without permission.

Legal uses of images (straightforward to complex):

For more legal details regarding images, read this article.

Some have faced legal action because what they thought was free to use actually wasn’t, like this.

What to do before you use an image online

For site speed and search engine optimization (SEO), do these things before uploading an image to your website:

  1. Rename it. don’t upload an image to your website named IMG_0042 or similar. Use keywords in your image names. You can rename your images by right-clicking on their existing filename in Windows. On a Mac, select the image you want to rename.
  2. Resize it. Scale them down to the pixel width of the main content section of your website. If you’re not sure, 1200px wide should be safe. I use Skitch on my Mac. Paint is a free for Windows. PicResize is an online tool.
  3. Compress it. Compressing is different than resizing. Resizing changes the height and width of the picture you see. Compressing squishes the file components you don’t see. I compress my images with Squoosh(choose MozJPEG or BrowserPNG). It’s a free online tool. How to use Squoosh.

FAQ

How do I make a clickable image?

First, follow the instructions above to choose an image and optimize it.

Upload it to the web. If you have a WordPress site, go to Dashboard > Media > Add New. (If you don’t have a website, use Google Drive.)

Get the image URL. This is the unique web address of your image. In WordPress go to Media > Library. Click on your image. Copy the text in the File URL field. (Find it in Google Drive.) Paste this URL somewhere you can get it in a minute.

Get the landing page URL. This is the page you want someone to go to when they click on your image. It’s the destination. Highlight and copy the web address in your browser’s address bar. Paste it alongside the image URL.

Create the HTML. This is the very basic HTML snippet you’ll use:

 <a href="LandingPageURL"><img sr="ImageURL"></a>

Keep the quotation marks in place. Replace LandingPageURL and ImageURL with yours. It will look something like this:

<a href="https://destination.com/"><img src="https://yourdomain.com/wp-content/uploads/2020/11/imagename.jpg"></a>

Copy and paste the HTML wherever you want it to appear.

Do I have to do this for every image on my WordPress site?

No. Simply add an image block to any post or page. Follow the prompts to upload your prepared image. Click on it to adjust the settings. To make it clickable, select it, then click on the link icon. Add your destination URL.

Can I use HTML to make a clickable image on social media?

No. In general, social media platforms don’t accept HTML. Each platform has its own guidelines for images. On Instagram, for example you can’t make an image clickable.

How can I add text to images or make other graphics with images?

If you want to add text to an image or create other types of graphics, the easiest (free) tool is Canva. Need help? How to design a graphic in Canva.

How does the Depositphotos deal work?

  • Buy one or more codes depending on how many photos you want.
  • Log in your AppSumo account to redeem your code. Go to My Products (top corner).
  • Go to the Select menu next to a code to redeem. Choose Redemption instructions.
  • Click Copy to Clipboard > Redeem Now. This will take you to the Depositphotos site. If you don’t have a Depositphotos account, sign up. If you do, sign in.
  • Paste your code in the box at the bottom and hit Apply. If you purchased more than one code, repeat.