Sharp Framing

While working on a project this week, I came across a really useful way to use CSS to improve the display of composite images. I think most web designers by now have the idea of when to use a JPG and when to use a GIF or PNG to save an image — basically save photos as JPGs and save graphics as GIFs or PNGs. However, there are lots of times when this distinction is blurred and neither one file type nor the other is particularly appropriate. A composite photograph with graphical text such as the example below is a classic example.

The image below is saved as a GIF, which has two problems. First, it's pretty big (about 24kb) and second, the limited palette of a GIF made the colors look terrible in the photographs.

Example GIF

See the close-up below showing the terrible color compression in the sky above the Capitol Building.

Example Showing Compression in GIF

Saved as a JPG, the results aren't any better. The photographs look fine, but there's heavy compression visible on the not-so-crisp lines and text.

Example JPG

See in the example below how bad the compression looks in the image. I could set the JPG compression to be very low, but that would make the image really big.

Example Showing JPG Problems

So, get to the point already, you're saying. Without any extra HTML code we can grab the best from both worlds. First, save the photographic parts as a JPG and the graphical parts as a GIF or PNG. Here's our two parts (I've outlined the JPG in red to give you the idea). Make sure to cut a transparent hole in the GIF or PNG where you want the photo part to show through.

Example GIF Example JPG

Then simply make the image tag as you would normally and set the JPG as the background of the GIF. You probably want to put this in your separate CSS file, but I'll just write it inline for ease here: <img src="example.gif" style="background: url(example.jpg)" alt="" />. And there you have it... all done.

Example Complete

This isn't perfect... it requires two requests to the server because there are two images instead of one, for instance, but it's a pretty good way of solving a fairly common design problem. I've tested this quickly in Firefox, Safari, and Internet Explorer 5.5/6 and it works perfectly for me. Hope you find it useful sometime.

Comments

Steven Garrity - February 1, 2006 8:01 pm

http://www.actsofvolition.com

Clever hack - very nice. Though you should have named it the Burka/Farnher/Frauvenhaupher Image Joint Photographic Experts Group Portable Network Graphics Overlay Enhancement Technique, or "N.A.M.B.L.A."

Jeff - February 1, 2006 8:24 pm

http://jrm.cc

I believe Photoshop can also use alpha layers to determine JPG quality for specific sections of an image when saving for the web. This would likely get you the "sharp" areas, while giving you high compression on the "graphic" areas. It's worked pretty well for me in the past.

But this is a neat trick. ;)

Jay Jones - February 1, 2006 10:50 pm

http://www.accutask.net

Neat. I've used similar overlays in the past, but for different effects.
You could have achieved a similar effect by just using a <div> container, giving it a positon:relative so other items inside could be absolutely positioned, and then position 4 separate elements inside.

This would allow you to have greater flexibility over the positioning, editing, etc. of the image assets. Sure, it would mean 4 hits on the server, but really... the times that would really cause a problem would be very few and far between.
Anyway... just a thought! :)

Nathan - February 2, 2006 11:12 am

http://www.myobie.com

Great job. I do agree that this might also be useful as a relative positioned container, but only if it was absolutely necessary for the job.

Daniel Burka - February 2, 2006 12:30 pm

Jay and Nathan: Sure, this particular example could certainly be done nicely by employing a relatively positioned container with absolutely positioned contents. However, that's awfully heavy-handed code for solving a pretty simple problem (this way is a single image tag and a single css property). There are also lots of times when the separation of the components of a composite image isn't nearly as clear as in the example above, which was intentionally simple to illustrate the point in an easy-to-understand manner. Thanks for the good feedback.