Naming your website images appropriately is almost as important as selecting the right image to go with your content.
Often when clients send me images to use on their website, they send me a bunch of files that look something like this: IMG_0863.jpg. This is bad practice on multiple levels.
It's not good for communication.
It slows me down when I have to try to figure out what image goes where. By naming images descriptively, it helps you organize your content and helps me do my job faster.
It's not good for Search Engines
Search engines can “read” text, but can not “see” what is in a picture. If you name your file descriptively, search engines can understand this. In HTML code, images have an attribute called alt text (alternate). The purpose of this is for you to describe the image in case a user can not see the image load on the page.
It's not good for Website Accessiblity
An accessible website refers to coding your website so people with disabilities can use them easily. People with visual impairments can not see images on a web page. By naming images and including appropriate alt text, you are making your website accessible to more people.
Image Naming Best Practices
These are image naming conventions that I use, and encourage my clients to use.
- File names should briefly, clearly describe the image.
- File names and extensions should always be lower case.
- File names should have only letters or numbers, with the exception of hyphens replacing spaces.
- If you are uploading images through a CMS like WordPress, always take the time to add alt text.
- If you have multiple corresponding images, name them logically in the same format. ie image-1.jpg, image-2.jpg
An example for this image:
Image name: working-from-home.jpg
Alt text: man working on computer from home
Naming your website images properly helps optimize your website in multiple ways.