Image File Naming Conventions for the Web

Summary
At a minimum, make your image filenames (1) five descriptive keywords organized in descending order of importance, (2) all separated by hyphens, and (3) all lower case letters. Some basic examples of this practice are:

• website-image-file-name-instructions.jpg
• photograph-collection-framed-prints-home.jpg
• developer-networking-meeting-norfolk-virginia.jpg

Want to know more? I wrote a practical dissertation on the topic. You can learn about how to properly name image files by reading below.

In my work as a website developer, I often collaborate with clients who send me images to use on their web pages. One thing that I consistently see is confusion about is how to properly name image files.

Sometimes, the image filenames are have default file name structures from a phone's camera roll, Facebook, or a screenshot. For example:

• IMG_3084.jpg
• 8AD68B26-C1EE-4F6B-92B0-925693760E20.jpg
• RenderedImage.jpeg
• IMG_3122.HEIC
• Screen Shot 2019-03-08 at 1_08_55 PM.png

Images with filenames like this are not formatted for web performance.

At other times, images are sent after the client or photographer renames them. This is usually done in an effort to put some identifying information on the image—an attempt to optimize the image for the web, or simply to be helpful (which is always appreciated, even if it misses the mark). For example:

• fit=2040x2040-1.jpeg
• Shawn_20.jpg
• Cerulean Fish lr 25 x 9 .jpg
• Fall & Spring .jpg
• KayakTourGuideOutdoorActivitiesForKidsAndAdults.jpg
• Charter_Boat_Chesapeake_Bay_Virginia_Maryland.jpeg

While these file names may provide some useful information about their resolution and content, all of them have problems, and they will need to be renamed before using on a website. (If you're viewing this on a mobile phone or other small screen device, you may already see evidence of why the last two filenames above are problematic.)

How To Name Image Files

An image that is ready to be used on a website will meet these requirements:

1. All lowercase characters.
2. No spaces or underscore characters.
3. Use hyphens to separate words.
4. No other special characters except hyphens.
5. Don't use prepositions (e.g., for, in) or definite articles (the word the).
6. No keyword spamming.
7. The first five words are indexable by search engines, so they should accurately describe what the image is about in decreasing order of importance.
8. Everything after the fifth word can be identifying information for use by the developer or image owner. (e.g., serial number, date, resolution, photographer name, source)
9. Use only .jpg images. (No .tiff, .bmp, .png, .heic, etc. Convert before sending.)

Some examples of basic, properly-formatted image filenames are as follows:

• charter-boat-chesapeake-bay-virginia.jpg
• charleston-conservation-gala-fall-2019.jpg
• sculpture-bronze-lifeguard-manhattan-beach.jpg

Note that these filenames are (1) all limited to five words, are (2) formatted in all lower-case characters, and (3) can be assumed to describe the actual content of the image. Also note that the descriptive terms start general and move toward specific. Very simple. In short:

• The first five words describe the content of the image
• All words are all in lower case characters.
• All words are separated by hyphens.
• The file type is JPEG and the extension is .jpg.

These filenames are also acceptable:

• surf-lesson-north-shore-oahu-thompson-DSC_3087-1200x800.jpg
• coffee-espresso-cafe-virginia-beach-anderson-IMG_2387b-1600x1600.jpg

In the filenames above, take note of the following points:

• The filenames follow all of the rules of the previous example.
• The sixth word is the photographer's last name, for later use in providing credit.
• The image filename is left intact in case the source file ever needs to be referred back to. (This is the only instance where I would use capital letters, granted the source file also uses them.)
• The image resolution is provided at the end.

Important Considerations

When providing image resolution in image filenames, keep in mind that WordPress automatically makes a variety of scaled-down duplicates of image files when uploaded to the website's Media Library, and then appends the resolutions to the filenames. So, if using a WordPress website, I'd advise leaving the resolution off and letting the software add it after the fact.

Also keep in mind that other file types, like PNG, are acceptable when the image is fairly small and the use of such is appropriate. Logo files with transparent backgrounds are often in PNG format. SVG files are often used for logos and other graphics. Images with animations are usually in GIF format. These are all exceptions to the rule, however. The vast majority of images on the website should be in JPEG format.

Video files, while part of a different discussion, would generally follow the same naming convention. These files should use the H.264 or MPEG-4 and .mp4 extension, or WEBM codec and .webm extension. Documents like PDFs should also follow this same naming convention.

Image details like copyright information, photographer name, subject, date, location, and original file source can be embedded as metadata. I strongly recommend making use of this.

Finally, don't send camera raw image files to your developer unless you have arranged for them to do image editing for you.

Does All This Stuff Really Matter?

If quality and performance of your website matter to you over the long run, then the answer should be yes.

When developing a website and publishing content to the Web, it's really easy to let attention to detail slide. A lot of people slack on these points, either because they're not aware of how to do it right, or because it's a lot of trouble to do it correctly. Furthermore, developers know that most site owners will never go in to their media library and check file names, alt tags, or inspect their site's code. I've stepped into many WordPress websites that are absolute rats' nests when inside the dashboard and, honestly, in those cases, that sloppiness usually ended up reflecting on the front end, as well. If your business matters—and I hope it does if you're doing it—then keeping a clean and well-organized house, so to speak, should always be a priority.

There's an ethical argument to be made for this kind of back-of-the-cabinets attention to detail, as well. If we compare the online environment to the built environment that we move through on the daily, it's a real bummer when people build things with no regard for quality, the community, the environment, or a sense of responsibility in the act of building, itself. It's how we end up with mile after mile of strip malls, totally forgettable architecture, urban blight, and places where nobody really wants to dwell. Obviously, every website does not need to be a masterpiece, but like the built environment, the digital environment is one that we all share, and it sucks to live in a world full of trash. Poor design and careless work are literally forms of pollution, and we should all act better.

Conclusion

Renaming collections of image files often takes a lot of time, and for clients that are trying to use their developer resources efficiently, this task can sometimes take hours out of a project's budget. Likewise, for the developer, tedious and mundane tasks like renaming dozens—or sometimes hundreds—of image files can make one question the actual meaning and purpose of their existence (and not in a good way). Furthermore, batch processing does not work as a solution to this problem because best practices dictate that filenames should be unique and actually describe what's in the image itself—especially if search engine visibility is a consideration.

I've found that the best way to do handle large batches of improperly-named files is to delegate the task to a contractor, but that also wastes time and money and runs up project costs. The best thing to do is to name the files properly before sending them.

Practical Use

Below are some examples of images and corresponding filenames according to the conventions described above.

Feedback

Have a different take on this subject or did you find the recommendations provided above to be useful? I'd love to hear about it. Send me an email and we can chat.