Image Naming Conventions?

HTML & CSS
1

As my website becomes larger and more complex, I am starting to amass quite a number of Images, Thumbnails, Buttons, Icons, etc.

And the thought occurred to me this weekend that I better come up with a better naming convention before things get totally out-of-control?! :eek:

So…

What “Naming Convention” do you use for your Images/Icons/etc?

And, in the examples below, which of the following do you think is best, and why?


Star_Red_15x15.png

star_red_15x15.png

star-red-15x15.png

star-red.png

RedStar_15x15.png

Fill in the blank: ___________

Some people would say that you should keep your file names short-and-sweet, but I think there is a benefit to making them verbose.

First, like everything on my computer, I tend to name things in such a way that things file themselves. (So, for instance, having “star” as the leading characters would help all of my Stars to group together.)

Also, I personally like to keep the Image/Icon Dimensions handy because it helps when laying out pages and doing the CSS.

On the other hand, you could argue that if I have to tweak an Icon, say from 20px by 20 px to 16px by 16px that I have just created A LOT of work for myself, because I have to chase down those old file name and update my HTML and PHP… (:

I can see both arguments…

And this is probably why I am asking for advice from you guys… :slight_smile:

Sincerely,

Debbie

2

Yep it’s a good idea to use naming conventions so you can easily locate specific image types

For general assets I use something like this:

bg-body-snow.jpg

  • bg is a background image
  • body is where it’s applied
  • snow is the subject of the image

icon-phone-16

  • icon is an icon type
  • phone is the icon subject
  • 16 is the icon size

Then for general images I may use a format such as type-subject-detail-date.png, eg:

photo-london-euston-station-at-night-aug2013.jpg

3

I also tend to prefer underscores between words rather than hyphens because then I can double-click on the name to copy and paste and the entire name will be selected instead of just part of it. It’s a lot faster than highlighting the entire name with my mouse. I find it really saves me a lot of time.

4

I tend to use the star-red-15x15.png naming convention or close to it and like bluedreamer’s examples. I intentionally minimize using underscores in filenames because one cannot always tell if one is missing. Debugging a careless mistake is more time consuming (annoying) than highlighting a filename with hyphens to me. (I make errors. :eek:)

5

I usually replace spaces with dashes, and use prefix and suffixes like

car-icon.jpg
car-blue-icon.jpg
bus-icon.jpg

etc.

6

If there are a terrible lot of images, instead of throwing all images in 1 big directory, you can also differentiate by directory; for instance:

[FONT=Courier New][INDENT][SIZE=2]images/system/backgrounds/…
images/system/buttons/…
images/system/icons/…
images/system/other/…

images/pages/… (all rather unique images in articles & other pages)

images/users/photographs/…
images/users/thumbnails/…[/SIZE]
[/INDENT][/FONT]
or:

[FONT=Courier New][INDENT][SIZE=2]system/backgrounds/…
system/buttons/…
system/icons/…
system/images… (all other system-images)
system/includes/…
system/stylesheets/…

pages/images/… (all rather unique images in articles & other pages)

users/images/photographs/…
users/images/thumbnails/…[/SIZE][/INDENT][/FONT]

Just how deep you want to go in the specification, and what fits the best in the rest of the system.

7

I like your suggestions!! :tup:

Unfortunately, though, a lot of this will have to come out in the wash because I have never built a website before, so I don’t have any baseline to go off of when it comes to organizing things.

I hate to say, “Things will work themselves out” because that invites disaster.

At the same time, I could spend the next year planning only to find out that my “plans” don’t reflect the “reality” of my website?! :eek:

Let’s hope that all of the detailed planning that I have been doing on my website over the past 3 years is enough!! :wink:

Sincerely,

Debbie