SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Image Naming Conventions??

    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?!

    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?
    Code:
    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...

    Sincerely,


    Debbie

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,354
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,505
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. )

  5. #5
    SitePoint Member cartoonbabyboy's Avatar
    Join Date
    Jan 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually replace spaces with dashes, and use prefix and suffixes like

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

    etc.

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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:

    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/...

    or:

    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/...


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

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    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:

    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/...

    or:

    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/...


    Just how deep you want to go in the specification, and what fits the best in the rest of the system.
    I like your suggestions!!


    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?!

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

    Sincerely,


    Debbie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •