11

Underscores versus Hyphens for Web Images

6 years ago from , Design at Bitium

Toss up. Which is better and why? Underscores or hyphens when naming images on the web.

someimagetitle.png or some-image-title.png

And what about related images? Does anyone use a combination?

someimagetitle-lg.png or some-image-title_lg.png

13 comments

  • Cihad TurhanCihad Turhan, 6 years ago (edited 6 years ago )

    I love underscore but ...

    In case if it's a link, it's underlined so you can't distinguish space from underline.

    Example:

    hello world (space character)

    hello_world (underscore)

    4 points
  • Jason Carulli, 6 years ago

    Jeff Atwood at Coding Horror has some great reasons why dashes appear to be better: http://www.codinghorror.com/blog/2006/04/of-spaces-underscores-and-dashes.html

    3 points
  • Nice ShoesNice Shoes, 6 years ago

    I camelBack.

    3 points
  • Devin HalladayDevin Halladay, 6 years ago (edited 6 years ago )

    I prefer hyphens merely because they look better to me.

    test_image_one.jpgvs.test-image-one.jpg

    1 point
  • Sean HendricksonSean Hendrickson, 6 years ago

    Doesn't have much to do with image filenames, but more with URLs on the web in general: underscores are much harder to type on an iPad or iPhone

    If you're used to using hyphens you'll probably use underscores less.

    1 point
  • ポール ウェッブポール ウェッブ, 6 years ago

    +100 Everything Zlaten and Kelly said.

    1 point
  • Steve ZimmermanSteve Zimmerman, 6 years ago (edited 6 years ago )

    dashes to divide words, underscores to divide concepts something like:

    header_carousel_marketing_messaging-v2.png

    0 points
  • Patrick LoonstraPatrick Loonstra, 6 years ago

    Underscores. Because hyphens are used in the normal written word. Like Noord-Holland, e-mail and stuff like that.

    0 points
  • Ibrahim NergizIbrahim Nergiz, 6 years ago

    I use "some-image-title-lg.png".

    0 points
  • Jonathan YapJonathan Yap, 6 years ago

    Although Zlaten and Kelly made some very good point above, I tend to lean what Patrick mention, hyphens in written words.

    I used underscore to structure the image names, similar to what Steve mention above. To me it is easier to distinguish information when there is a little whitespace within the x-height.

    Having my fingers on the keyboard all the time doesn't really make a difference on having to press shift-dash. For me, I find the action of just pressing dash very odd. Maybe because its in the region of backspace.

    There are very few occasions that I would actually do any searching or renaming images on devices. So unless I do design/code on a tablet, I would default to underscore.

    Though this is a personal preference and something I gotten used to, there are many good reasons as mention above to use hyphens. Take your pick :)

    0 points
  • Arvid JansonArvid Janson, 6 years ago (edited 6 years ago )

    I more or less always use the combination, primarily for the OSX feature of being able to quickly select items separated with underscore. So, I group the common part of the name using underscore and then add "meta data" in the same way, and separate the parts with a dash.

    description_of_file-version_1.png

    EDIT: This obviously only applies for assets which urls the users never should have to interact with, such as images. Actual webpage urls are a whole different story.

    0 points
  • Surjith S MSurjith S M, 6 years ago (edited 6 years ago )

    I'm using hyphens instead of underscores because my mentor told that hyphens are good for SEO [google image search].

    Google will read names as a single word if it is separated with underscores.

    This is a 3 year back story, I don't know if it is changed or not.

    But still I'm following that method.

    0 points
  • Jason Carulli, 6 years ago (edited 6 years ago )

    Ouch, looks like my underscores were removed. Use your imagination.

    0 points