Elastic Images

Written by Kevin Lamping, inspired by Michel Fortin

One of the biggest disadvantages of using css-based image replacement is the loss of scalability. Graphics have been notiorously known to scale poorly, resulting in jagged edges, especially noticable on words and straight edges.

In my distant memory, I recalled reading a tutorial about how to create "Liquid Images". The article explained how to optimize a photograph so that it can be streched when the user resizes their font. The problem was it could only be used on photographs; there was nothing about text or images with plenty of straight lines. So going off of Michel Fortin's tutorial, I set up a test bed for scalability in textual images.

Here we have our overused gel button. (Note: All images below this one are style with EM's so that they will scale when the font is resized)

Search

Now, let's try making this button a little bigger than first designed

Search

You can see how horrible it scales. There are plenty of jagged edges on the text and the curves don't look smooth. Here comes Michel Fortin's 'liquid image' to the rescue. Well discuss how to achieve this effect in just a sec, but here's a sneak peak at the finished product:

Before Scaling: Search

After Scaling: Search

While the image isn't the sharpest when resized the result is much more desirable than before. Let's take a look at how we can achieve this:

  1. Stretch it - Take your original image, the size you want it to be by default, and in your favorite image editor, make it about 3x bigger. For example, in Adobe Photoshop you will goto Image->Image Size. Once there, under 'Pixel Dimensions', change the drop-down menu to read percent. Then change the width and height value to read 300 instead of 100. Click 'OK' and viola, a nice blurry stretched out image. (You can read why this is important on the Liquid Image page).
  2. Compress it - Now that we have our stretched image, save it in JPEG format, but instead of a high quality, lower it down. In Photoshop, when saving for web, the quality should be around 20. The idea is this: "a blurry image can be compressed more with less quality lost. We can thus use a stronger JPEG compression for our image without really losing quality." If you want to save it as a gif, you need to do the compressing before you save it. You can achieve this effect with a Gaussian blur of about .5 pixels radius.
  3. Size it - When styling the image, you need to be sure to use em's for the width. This ensures that it will resize in browsers like Firefox 2 or IE6. I know of no method for converting pixels to em's, you just have to eye it. I usually start off at 10ems, then increase/decrease accordingly. It helps to use two images, one at the original size (using pixels) and one in ems. That way you can compare the em image to the original size easier.

Extra Notes