This is the suggested naming convention for images loaded into the site. Note each modifier is separated by an underscore.


{image-name}_{size}_{version}.jpg/gif/png


Image Names

I recommend keeping names short and use only the following characters in file names.

  • lower-case alphas (a-z)
  • numbers (0-9)
  • dashes / hyphens
  • underscores

You may use capital letters (A-Z) however people tend to forget that there is a difference between them.

The most evil character to use is the space. Never, never use spaces within a file name.


Examples:  "headshot-joe-user_123.jpg",   "logo-homepage3_lg.jpg",  "mountains-rocky_new.png"


Bad example: "Head shot JOe User.jpg",   "image 002.jpg"


Sizes:

These are suggested sizes for image:


th: 100px wide (height is variable)
sm: 240px wide (height is variable)
md: 400px wide (height is variable)
lg: 640px wide (height is variable)
xl: 1024px wide (height is variable)


Square images has the letters"sq" followed by the length.  So a 320x320 square image will be "_sq320"

Example: "headshot-joe_sq320.jpg"


Custom height or width:

Use the "w" (width) or the "h" (height) modifier to indicate either a specific height or width.

Example:  headshot-joe_w400.jpg    "logo_h200.jpg"


Specific dimensions

Image with specific height and width:  "headshot-joe_320x600.jpg"



Versioning

This is an optional modifier, but may be useful in certain situations where tracking the age or version of the image is necessary.  This can be anything from a date or simple inventory number.

Examples:   "headshot-joe_md_2016.jpg"   "headshot-joe_th_001.jpg"    headshot-joe_lg_old.jpg"