Design Twelve / Sii Cockerill

Online Business Consultant, Designer & Developer.

How to name your image files better than (almost) everyone else

A lot of my clients love WordPress. First, it’s free. And second, they can use it. But sadly, the gap between using WordPress well and using it poorly is cavernous.

Today, I’m finally going to write down my thoughts about using images on WordPress websites (and non-WordPress websites) and extol the virtues of using a proper image naming convention.

The point of it all

Regardless of the technology chosen to create a website, every business owner wants visitors to come and see their website – and then probably buy something, or contact someone, or perform some other valuable action.

In order to drive traffic to their website, they might run a marketing campaign on social media (paying for ads) or on Google or Bing (again, paying for ads). But what they’re really hoping for is that their website is ‘found’ in the search engines — all of them — because then their traffic is FREE and they don’t have to pay anyone for making ads or anyone else to publish them.

Cue, SEO.

Search Engine Optimisation (SEO), in particular ‘On-page’ or ‘Technical’ SEO, is the art of preparing a website in the way most favourable to a Search Engine.

The goal of this preparation is that each page of the website will appear in the Search Engine Results Pages (SERPs) when relevant terms are searched for by a person (in DuckDuckGo or Bing or Google).

Search my URL

If you’re web-savvy, you already know what a URL is.

If you’re at all clued-up about SEO, you’ll appreciate why domain.com/about is a better URL than domain.com/?post_id=3.

If you’re neither, a URL is the address of a thing on the internet. We’re talking websites, webpages, documents, images, music – everything. Everything uploaded to, or created on the internet has a URL that points at it.

URL stands for Uniform Resource Locator.

I don’t know about you, but when I’m searching for something, I like it when it’s easy to locate.

IMG_7520.JPG

This chapter is about a dog playing cards

If it wasn’t clear to you when you read the heading, I’m sorry. But now you’ve experienced the point I’m about to make.

When you take a photo of your dog playing cards at the weekend, and upload the image file to your website and leave it called IMG_7520.JPG, it doesn’t tell anyone what it’s an image of unless they can see it with their own eyes.

In WordPress, the URL of that image would be something like https://www.domain.com/wp-content/uploads/2018/08/14/IMG_7520.JPG

If I was searching for the ‘dog playing cards’ image on your server, that URL wouldn’t help me. It wouldn’t help a Search Engine either.

Most website owners upload their files exactly like this. It’s not just non-web-savvy website owners – or even just the ones who know nothing about SEO. I’ve seen this bad habit everywhere I’ve looked. I’ve explained time and again the benefits of naming images properly, but very few people heed the advice.

But it’s not all bad – while your competitor carries on uploading their product images to their business website as IMG_7521.JPG and DCR_7522.JPG (or even istock-7208177s997_xsmall.jpg), you can take advantage of the situation – and get ahead – by naming your images so that they are easy to find.

Remind me – what’s the point of it all?

I searched ‘donkey’ in Google. I didn’t ask for images, but that’s what it showed me before everything else.

Just think about that for a minute.

OK – so how do I do it?

Before I tell you how I’ve made it easier to find a website using my image naming convention with great success (and minimal effort!), I’ll caveat all of this with two words: machine learning. In the future, it’s likely that Google won’t need you to label your images in order to know what they are of. But, as I say, that’s in the future.

I follow three simple rules when I name my images BEFORE I upload them – that bit’s important. You can’t easily rename your images after you’ve uploaded them to your WordPress website.

So BEFORE you upload your images, open Finder or My Computer and start renaming your images by following these three rules.

1) Use lowercase letters

2) Use hyphens instead of underscores and spaces

3) Describe the image (sensibly)

That’s all there is to it. You can stop reading now and start renaming your images and over time, you’ll reap your rewards.

Good luck!

But, if you’re the kind of person who wants to understand why these three rules came to be, I’ll tell you if you read on.

1) Use lowercase letters

This one is simple – some web servers are setup to be case sensitive and others are not.

On a server that *is* setup to care about case, the following two URLs are considered to be two different files:

  • https://www.domain.com/images/This-Is-An-Image.jpg
  • https://www.domain.com/images/this-is-an-image.jpg

That can lead to problems for you, so this rule gets you around it.

If you only ever use lowercase letters, you don’t have to think about it anymore. (You could equally choose to always use uppercase letters but that means pushing the CAPS lock button on and off all the time.)

2) Use hyphens instead of underscores and spaces

If you leave spaces in your file names, you create ugly URLs that are difficult to read.

This is not a valid URL:

  • https://www.domain.com/images/this is an image.jpg

Instead, the spaces are replaced and the resulting URL looks like this:

  • https://www.domain.com/images/this%20is%20an%20image.jpg

Using hyphens, leaves you with this:

  • https://www.domain.com/images/this-is-an-image.jpg

I’m sure you agree that the final image is no less readable than the first, but it has the benefit of being valid.

Using hyphens instead of underscores is mostly a personal choice. A rule isn’t very good if it’s open to interpretation and could lead to different results. So instead of creating a guideline that says “Use hyphens or underscores, not spaces – it’s up to you”, I chose hyphens.

(I also worked with a guy a long time ago who said that Google preferred hyphens – he previously worked at Google.)

3) Describe the image (sensibly)

Here we are at the last rule.

So what do I mean by ‘sensibly’?

Let’s say that you take a photograph of a sparrow hawk and a dove, you might name it:

  • sparrow-hawk-dines-with-dove.jpg
  • speckled-brown-sparrow-hawk-settles-down-for-meal-with-white-dove.jpg

I know which version I would choose, but ultimately you could argue either way. As an additional guideline, consider adding as much detail as you need to make the image name unique.

Often, you have a group of images to name. They are related, so you might name them similarly. But you can help yourself out if you do something a little bit counter intuitive.

If you have 5 images that relate to the sparrow hawk, start your image name with ‘sparrow-hawk-‘ and then add on some other details. Why? They’ll all appear together when you browse the folder on the server.

Game Of Thrones

I hope you’ve found this article useful – if you have any feedback, please email me and let me know. If there are any mistakes or typos, it’s because I’ve got a third of an eye on Game Of Thrones playing in the background.