On large images, unorthodox decisions, and browser scaling

Working for a software company, I'm constantly struggling with resizing screenshots for the web; most images resized by HTML or CSS in the browser just don't render clearly. Some "lovely" alternatives include manually rescaling all screenshots and maintaining two copies (thumbnail and full) or force the reader to scroll to see hidden portions of the images. You could also recreate all the screenshots in a vector format and export to Flash, but that's pure insanity.

When I decided to make my portfolio, I was forced with two choices:

1. Create itty bitty screenshots of my work and force the user to guess if they want to see a more detailed example
2. Create a scaled div that masks most of the image.

I reluctantly went with the latter. The larger size (hopefully) gives the user a better sense of color and placement without forcing much interaction on their part.

Of course this begs the question, why can't browsers scale images properly? Only one browser even comes close, Safari.

Here is a side-by-side example of browser scaling as compared to Safari. (Yes, I get the irony that these screenshot examples probably require you to scroll)

These images are unedited screen captures scaled at 50% of full. Notice how all of the text elements are garbled and noisy in every browser EXCEPT Safari. With pure photographs the general idea can be expressed, but with screenshots most of the key elements are lost in a sea of garbled mess.

My hope is that with the release of Firefox 3 and IE8, this post will be archaic. For now it's back to unorthodox and time consuming methods to fit your images properly or hope that your audience is using a browser with close to zero market share.