Adding Images to Your Website — a detailed checklist

Note: If you are adding images from Unsplash (or other awesome providers of quality stock photos), this checklist is particularly important. Those files are often massive and, if not taken care of, will drastically slow down your page load.

Adding images to your website is probably something you do often, and with good reason. Images add depth to websites, make information easier to digest, and overall create a pleasant experience.

Well, they should.

There are two reasons this checklist exists:

  1. Slow loading images make a website terribly frustrating (and sometimes unusable) over poor internet connections.
  2. There are a couple SEO opportunities (apart from page speed) related to images that you can easily take advantage of. 

Sometimes in the heat of the moment it’s easy to forget the importance of correctly adding images to your website. 

Enter this checklist. Refer to it when adding images to your website, until the process becomes second-nature.

Overview

  1. Choose best file type
  2. Compress
  3. Resize
  4. Rename
  5. Add Alt Text

1: Choose the best file type

With images, you’ll likely be choosing between JPG and PNG. Choosing the right type can have a large effect on file size.

Choose JPG if your image is a photograph, or has many photo elements. 

Choose PNG if your image is text-based or has transparency elements.

2: Compress

Images often contain a lot of extra information that can be removed without impacting the quality. My absolute favourite tool for this is ImageOptim. It’s downloadable Mac software that lets you drop in both JPGs and PNGs, and it will compress them. No need for uploading and downloading—your files stay in place.

My second favourite tools are compressjpeg.com and compresspng.com, which require you to upload and then download your compressed images. They compress images a bit differently, which means if I use both ImageOptim first, then one of these, I can achieve greater compression, almost always without sacrificing quality.

3: Resize

Images for the web don’t need to be exponentially larger than the maximum size they are going to be displayed. For example, if the maximum width of your content area is 1000px, you absolutely do not need an image that is 6000px wide. Larger images take longer to load. 

The tradeoff is a bit of quality. Having larger images than required means they will be look perfect. If they load. 

If they load slowly (or not at all) you are risking many users not seeing them at all, users experiencing frustration at the slow load speed, and a hit to your SEO (fast page speed is important to SEO).

The trick is to find your balance between quality and size. If you are okay with your images not looking super high res, it’s absolutely a good idea to resize them to the exact maximum size they will ever appear. 

Let’s do an example.

Following are two images that are exactly the same in all other ways except size. The first image has been resized to the exact maximum width of this content area (780px). The second image is much wider (3000px).

sample resized image
sample wide image

If you look carefully (get right up close to the screen and/or zoom in your browser), you’ll see the second image is much more crisp. However, it’s also almost 10X the file size.

So make your size decision based on what is most important to you, but don’t go overboard. This is the web, after all, and in most cases nobody will mind that your images aren’t perfectly crisp—they’ll just be very impressed with your page load speed.

How to resize

There are a bunch of ways to resize an image. Two quick ones are:

  1. Tools > Adjust Size in Preview on a Mac
  2. Image > Image Size in Adobe Photoshop CC

4: Rename

For SEO purposes, and to save from embarrassment if someone downloads and image and sees the hilarious/random/arbitrary/auto-given-by-your-camera image name, you’ll want to rename your images before uploading them to your website.

(Once you’ve added an image to WordPress, the name of the file itself is very difficult to change—so definitely do it first).

You’ll want to give your image a relevant name. Use descriptive keywords from the page/post the image will be found on, if they are relevant to the image.

The SEO reason we give images good names is because Google crawls the images you add to your website and allows people to search them (you know—Google image search). You want your images to show up when people make relevant searches.

Naming format

When giving names, uses dashes between the words, instead of underscores, spaces, or no separator. For example:

Correct: sample-wide-image.jpg

Incorrect:
sample wide image.jpg
sample_wide_image.jpg
samplewideimage.jpg

5: Add Alt Text

Alt text is the text that appears in place of an image when the image cannot be loaded. It is also the text the a screen reader reads.

It also happens to be good for SEO when your alt text contains important keywords. 

However, please do not just dump your keywords into your alt text. Be mindful of what alt text was created for. Imagine you have a very slow internet connection that cannot load images. You’ll see the alt text, and if all you’re seeing is a jumble of keywords, you’ll have no idea what was supposed to be there. Also imagine if you are blind and using a screen reader to use the web, and you come across all these ‘images’ but don’t have any good indication of what they actually are.

Not cool. 

So when writing your alt text, put yourself in these situations and imagine the text that would be helpful—text that describes what the image is trying to represent. If it’s relevant to include a particular keyword you are trying to rank for, absolutely do it. If it’s not relevant or doesn’t actually help describe the image, then don’t.

Happy image adding!