Tips For Better Filenames in WordPress

Thoughts on renaming uploads. Rename files before uploading them to Media Library or not? What is the safest way to name a file? Read on to find out.

The Problem

When working with websites that exist for some time and have a number of posts, I sometimes notice that many users don’t rename images before putting them in media library.

Instead, they upload them “as is”. And since images come from different sources (cameras, scanners, other websites, photo stocks), there is no system in filenames whatsoever.

It can get even messier on non-english websites where people upload files named in their native languages alongside with files named in English.

Don’t get me wrong, WordPress deals good with such filenames. In most cases, they will work fine. But introducing and following a naming pattern for your uploads may give some benefits.

It doesn’t mean that you’ll have to rename every single file manually. There are many tools specifically for that purpose, we’ll cover them in the next post. Right now let’s focus on the pattern itself.

The Pattern

By pattern I mean a set of rules that you keep in mind while renaming your files. I want to share with you the pattern I use today. The rules are very simple:

Filename must be cross-platform
Filename must be descriptive
You can tell the name of the post an image is attached to from the image filename

It may sound like an overkill, but it really is not that hard to follow these rules if you have the right tools.

What Is Cross-Platform Filename

By cross-platform I mean that the image can be stored, opened and viewed on any device and under any operating system without any filename-related problems.

I want to be honest with you. I did not have such problems with images in WordPress context. But I did see the question on this matter asked on WordPress support forum.

After I discovered that support ticket, I was curious what really is the safest filename recipe.

Few hours of googling actually created more questions than answers. But as far as I understood from that research, one of the most important concerns when dealing with filenames on the web, is that at some point they will be used as a part of a URL. And if there are characters in the filename that are not valid for use in the URL, they must be converted to valid ones or replaced, or escaped. In other words, extra operations are needed to make things work.

Another concern would be the use of capital letters. Some platforms are case-sensitive and some not. This means that brooklyn-bridge.jpg and Brooklyn-bridge.jpg may be treated like one file or like two different files on different platforms.

Long story short, here is the list of rules that will guarantee URL-safe, cross-platform filenames:

Use only letters [a-z] of English alphabet and/or digits [0-9]
All letters must be lowercase
Dash (-) must be used as a delimiter
Filename must start with a letter or number

But like I said before, today WordPress deals good with messy filenames, so these rules are mostly for organization purposes.

Why Descriptive Filename

Here is the thing. Search engines nowadays take more and more things into account when ranking websites. And descriptive filenames will certainly add their five cents.

Don’t get me wrong, renaming an image will not put your website to the first search results page instantly, but it will help at some point. Consider this example:

IMG_5623.JPG – Not OK
brooklyn-bridge.jpg – OK

Naming files descriptively may also help if you need to find the specific image while browsing uploads folder via FTP. I know, it is not something we do every day, but sometimes it might be necessary. It will save you some time if you can tell what’s on the picture without actually opening it.

Post Name in a Filename

Taking this even further, I usually rename files in accordance with the post name. The pattern looks like this:

the-post-name-NN.jpg

Where NN is the order number of the image in the post from 01 to 99. I feel that I’m not likely to have the post that will have more than 99 images in it. If you feel like you do, you may adjust the pattern to:

the-post-name-NNN.jpg

or even:

the-post-name-NNNN.jpg

but it really sounds like an edge case to me.

Alternatively if I am dealing with a post that has several subtopics or several galleries in it, it is a good idea to adjust the pattern like so:

the-post-name-subject-NN.jpg

So, let’s say, we have a post that is called “Three ways of warming up” with 3 pictures in it.

Their filenames will be:

three-ways-of-warming-up-01.jpg
three-ways-of-warming-up-02.jpg
three-ways-of-warming-up-03.jpg

If this post has more pictures describing each way of warming up, then filenames will look something like this:

three-ways-of-warming-up-walking-01.jpg
three-ways-of-warming-up-walking-02.jpg

three-ways-of-warming-up-jumping-01.jpg
three-ways-of-warming-up-jumping-02.jpg

three-ways-of-warming-up-drinking-01.jpg
three-ways-of-warming-up-drinking-02.jpg

As you can see we can tell the name of the post, what is actually on the picture, and what is also important, chances of getting duplicate with such system in filenames are close to zero.

Conclusion

Rename files or not? Well, it really is up to you. You are not likely to get yourself into a big trouble, choosing to leave filenames “as is”.

But for me the answer is yes. I like to keep things organized. If you feel the same way read the next post on bulk renaming files. If you have different approaches to organizing your uploads please share in the comments.

Other Resources

Want some more tips on image management in WordPress. Here is the list of articles that will help you do it faster and less painful. Subscribe to my Twitter for more posts on WordPress.