5.3. Naming Images for the Web When you store images on your computer, you probably prefer long, descriptive names like "Lloyd and Deborah investigate the meteor, May 2013." For personal use, these kinds of names are fine, but for the Web, you want something a bit more compact. Here are some suggestions: Always include a standard extension -
An extension is a short label that you attach to the end of a filename with a dot (.). In the case of image files, the extension tells the browser what type of file the image happens to be. For JPEGs, it's .jpg or .jpeg; for GIFs, it's .gif; for PNGs, it's .png. Good graphics programs automatically append the correct extensions to your files. Stick to alphanumeric characters -
Don't use punctuation or other typographical marks in your filenames. Use letters and numbers only. Instead of spaces, use the underscore character (_) or hyphen (-). Try for eight characters maximum (not counting the extension) -
If you really want to act like an old-school web designer, try keeping your filenames to eight characters maximum, not counting the extension. Vintage software and hardware insist upon the eight-character cap. The newer stuff isn't so picky, so if you find yourself going beyond eight characters, you should be all right. Use plain language whenever possible -
Why choose flwr.jpg when you can have flower.jpg instead? Plain-language names are easier and clearer. | TIP | There are at least two side benefits to using plain-language names for your images. First, your images appear in search-engine results. Second, your images have built-in text equivalents (but don't forget the actual alternate textsee Chapter 15). |
Use prefixes for images that belong to a group or set -
When you build your site, you'll store all the images for all the pages in a single folder. As you might imagine, your image folder fills up quickly, and it's no joke trying to find a particular image when you have five or six hundred items to weed through. To save yourself some hassle, try attaching prefixes to images that belong together. For instance, you might decide that the filenames for all product images should begin with prod_ or simply p_. This way, when you view the contents of your image folder in Dreamweaver, all the p_ images appear together in the alphabetical listing of files. Use suffixes for different versions of the same image. -
When you have two different versions of the same imagea small thumbnail version for one page and a full-sized version for another page, or a default button state and a rollover button state for your main navigationuse the same general filename for both images, but attach a short suffix to one or both that explains the difference. The filenames flower_sm.jpg and flower_lg.jpg tell you exactly what you need to know when you're scanning the contents of your image folder. For rollovers, you might use the _ro suffix. Save your default-state image as button.gif and your rollover-state image as button_ro.gif. | TECHTALK | A tracing image is a to-scale mockup of your layout for use in Dreamweaver. |
|