HTML & CSS Tips and Tricks

DISPLAYING GRAPHICS THE EASY WAY
Part A — Individual Images

Putting a photograph or other image on a line by itself is easily accomplished.  If you do it a lot, as I do on my Outdoor pages among others, some shortcuts for one's markup can be highly useful.  The following relatively simple methods, invaluable to me, might also appeal to you.

Images from my various cameras contain 12 to 24 megapixels of data each; whereas a typical computer monitor is set to display less than one megapixel at a time.  This means that such photos or other sizable graphics must be re-sized to fit on a web page.  (We won't even discuss thumbnails, because they look terrible.)

When processing photographs, I save most of them as 1024×768 pixels (or 768×1024), then display them at a lower resolution.  Pretty much all such images have links enabling them to be expanded to full size, which is just enough to fill a 1024×768 screen.  Anything larger can force the viewer to scroll around in order to see the entire graphic (which actually is a desirable option now and then).

Say you wish to display several images on a page, possibly with text or other items in between.  If they are all the same size, then one could simply specify that dimension in CSS:

Then:

Note that there is no [alt=""] reference in the image definition.  I have left that designation out of all examples just for the sake of clarity.  Although I don't give a damn about them myself (and your browser doesn't, either), we know that they must actually be included in order to satisfy the code-validator.

In any case, if you want to display your graphics in a variety of resolutions, something else must be done.  Letting them load in their native sizes might not be a viable option, and creating individual IDs would be tedious and unnecessary.  One workable solution would be to apply an inline style to each image:

(note: compare this figure with my logo at the top of the page)

Purists, however, aren't enamored of the deployment of a lot of inline styles.  I agree with the CSS pundits that such usage is best avoided, but not for the same reasons.  Whereas they want to separate presentation from content, I simply don't want inline directives cluttering my code and making it difficult to read or manage.  (There is little usage of inline styles on this website.)

To that end, I offer a simple setup — an array of classes of pre-specified image-widths in sizes that might be used on a regular basis.  This code is most efficiently included in ALL.CSS, for deployment anywhere:

All images will be horizontally centered on the line.  Borders are included as well, although you might or might not want to include those.  Now, it's as easy as:

When looking at your page, if you aren't satisfied with one of those sizes, then it can be adjusted by changing just a single digit — 'pic6' to 'pic7', for example.

Captions and links are easily added.  One might also like the font-specs to be somewhat different from standard text.  Choice of color would depend upon the current page background:

"She Who Watches", Columbia Hills State Park, Washington

"Ghost Panel", The Great Gallery, Canyonlands National Park, Utah

This method is a good example of Object-Oriented CSS — usage of pre-set classes that are easy to remember and easy to implement.  If you have been reading elsewhere about OOCSS, then perhaps there was little here that you didn't already know.  The material on the next page, however, will be a different story.