Images as Content

February 02, 2009

It occurred to me that maybe I have been thinking backwards about the use of images as content. What I mean is, I have been told on occasion that images or photos I post here on my site are too small. My response has always been that the column that holds all of an article’s content is only 405 pixels wide, and that images would ruin the next column’s layout if I allowed them to be larger.

And that sounds reasonable to me.

Or it did, before I realized that it was essentially forcing the content into the range of presentation. What happens when I start thinking about redesigning my site to accommodate a larger column width? I have to go back and reformat all the images that I have taken in the past two or three years.

The Solution?

Well, it may not be something that everyone agrees with me on, and that’s fine. I think what I’m going to do is set a reasonable width for images, something like 720 pixels in width and then allow them to adjust their own height proportionally. And I’m going to have CSS do some scaling with them as necessary. Why 720 pixels? Because it’s not anywhere near 960 pixels, the new standard width to which I’m moving. 720 pixels also matches the width scheme often found in 960 pixel designs. I feel like that’s a good choice, because even at the full 720 pixels it’s not going to take over everyone’s screen.

And vertical images won’t be 720 pixels wide, that would make the image unmanageably tall.

What About a Lightbox?

Using a Lightbox is something that I have found helpful in the past, allowing users to click on the image to see it larger. And that’s a good starting point, but it still requires a larger image than 400 pixels.

So, with the Lightbox solution the user would load an image that is 400 pixels wide and then if they wanted to see it larger they click… and load the same image at a larger size. What good is that?

If I go with my proposed route, I can have CSS render the image at 400 pixels and then reference the same image to present the larger version. It seems as if that should significantly cut down on the load time for my viewers because there isn’t a second and entirely separate image to load. If I wanted to be a little more creative about it I could probably even figure out a way to pull a fully functional lightbox out of the equation and just reformat and reposition the image when the user clicks on it.

I think a single image with some CSS adjustments and a lightbox-type script will provide the best option for not breaking my current site while allowing me to consider future designs. Do you have any thoughts?

Share on Twitter | Share on Facebook | Bookmark on Delicious |