Naming convention for img files

Mike's Notes

Here is a naming convention for images that the Content Management System will use. This was inspired by a StackOverflow post listed below in resources.

This has not gone into production yet.

Resources

• https://stackoverflow.com/questions/2071687/naming-convention-for-assets-images-css-js

References

• Reference

Repository

• Home > Ajabbi Research > Library >
• Home > Handbook > 

Last Updated

17/05/2025

Naming convention for img files

By: Mike Peters

On a Sandy Beach: 25/06/2024

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

Pattern

• {imageType}-{name}.{imageExtension}

{imageType}

• icon (e.g., question mark icon for help content)
• img (e.g., a header image inserted via <img /> element)
• button (e.g., a graphical submit button)
• bg (image is used as a background image in CSS)
• sprite (image is used as a background image in CSS and contains multiple "versions")

{name}

• Name to come from the design system

{imageExtension}

• jpg
• png
• gig

Examples

• icon-help.gif
• img-logo.gif
• sprite-main_headlines.jpg
• bg-gradient.gif