Ted's Computer World 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 Hiking 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 someone else.

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 can be 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, we know that they must actually be included if only 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 the graphics 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 pages and making them hard to read and difficult to manage.  (There is very little usage of inline styles on my website.)

To that end, I offer a simple setup — an array of classes for pre-specified image widths in sizes that might be used on a regular basis.  This code can go into ALL.CSS for usage anytime, anywhere:

*

All images will be horizontally centered on the line.  Borders are included as well, although you may or may not want 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.  Because you probably have been reading elsewhere about OOCSS, perhaps there was little if anything here that you didn't already know.  The material on the next page, however, will be a different story.

Go Back