Grow your CSS skills. Land your dream job.

Resizeable Images (At Full Resolution!)

Published by Chris Coyier

resizeable-images.jpg

Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don't bork when text is resized. But did you know you can make images grow and shrink along with the text?

The trick is to give your images a unique class and set their widths with an em value.

HTML:

<img src="images/fruit.jpg" alt="fruit" class="expand" />

CSS:

img.expand { width: 10em; }

Now because you are forcing a specific width on this image, the web browser is in charge of doing the resizing, which is generally frowned upon. I tend to disagree though, I know that a web browser will never be as intelligent at retaining image quality as Photoshop, but the proof is in the pudding and I think generally web browsers do a fine job at it.

Here is the trick: make sure your starting image is larger than the default size. If the size your image is exactly the size as it is displayed on screen at the default text size, you are going to lose image quality as you size it up. But if your image is larger, it will be scaled down at the default size and have room to grow while maintaining resolution.

[VIEW EXAMPLE]

*Except, of course, IE <= v6 which will not resize font sizes set in pixels.
**Except, of course, really nice web browsers like the latest releases of Firefox and Opera.

Comments

  1. Chad
    Permalink to comment#

    Does this mean that the image size will be bigger than it should?

  2. Mathew Byrne
    Permalink to comment#

    Looks great in Safari and great concept in general. Love to see a rock solid cross-browser implementation of this.

    Can’t wait for Browsers to support CSS image resizing natively, finally we might be on the verge of truly resizable layouts.

  3. Permalink to comment#

    In response to Chad: yes. The image’s actual size in Kilobytes will remain the same size with this technique. For example, the fruit image on the sample page sits at 145KB, which is about 10 times larger than it’d have to be if it were sized down.

    Which isn’t to say that it’s a bad technique. It’s actually fairly cool. But you might not want to use it in places where you’re worried about your users’ bandwidth.

  4. Opera already supports image resizing.

    Some time ago, I wrote an article about resizable layouts:
    http://taat.pl/typografia/skalowalny_layout.html
    (sorry, only Polish, as far)

    But you’ll understand the code :)
    At the bottom there’s also a simple GreaseMonkey script to implement
    native image scaling in Firefox and IE.

  5. Kewl Bananas!
    Im guessing this is similar as the enlarge in IE7??

  6. Anders
    Permalink to comment#

    Sholudn’t one specify the width and height attributes on the img tag, in order to make the page loading faster? And surely you can’t have the css override those attributes once they’re set.

    “The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.”

    HTML4 specs. – Width and height

    However, this is a nice little trick…

  7. Nice trick. But if you want to have the best image quality, the default size should be the actual image size.
    How do you accomplish that in this case?

  8. Using larger images works fine only in Safari.
    Take a look on the screenshots I have done (on Windows):
    http://taat.pl/typografia/browser_resize_screenshots.png

  9. Cool trick. This basically extends an old trick published by Jeffrey Zeldman (if I remember correctly). The proof of concept page can still be seen at http://aneventapart.com/atlanta06/em-based/aea-scale.html

  10. Although in retrospect I don’t see why anyone would want to bloat the size of their images and consume more bandwidth for the minority of 1% who view sites at a larger font setting.

  11. @Dennison:
    Unless, of course, you belong to that 1%…
    ;)

  12. @Tomek: Thanks for creating those screenshots! That is really interesting. I am not seeing those results exactly, although I think I was doing so much text resizing creating this that I think I didn’t realize how small the “real” default was. I think if you kick it up one notch, the cross browser results are a lot better.

    @Dennison: Yes, it does bloat size, but it doesn’t have to be as drastic as this example. Just enlarging enough for one solid notch up would generally be fine I guess. People generally don’t need to view body text at 72 pt =) And thanks for that link! That is an awesome example of using this in a real layout.

    @Jermayn: I’m actually not sure about IE7, but I know that the latest version of Opera and Firefox both have built in image enlargement, and it works very well. So, this is probably pretty much an outdated technique. I just thought it was kinda cool….

  13. Permalink to comment#

    a very simple solution and quite effective, thanks for sharing.

  14. Permalink to comment#

    I often combine this with max-width set so the maximum physical size and min-width set to half the physical size (in pixel this time). Does not work with IE

  15. JB
    Permalink to comment#

    It’s a nice trick. I’ve used this technique alot in the past, though I would (personally) would never use a full size image. Not a negative, it just seems that if the point is to enhance the user experience for visually impaired users who would enlarge their font size manually, they’re probably more interested in the content than downloading a high res image. I think there are plenty of uses for this (artist sites come to mind), but I feel that having high resolution images scaled down through CSS is something that should probably be used judiciously. In general, its a great trick and if you combine it with the old zoom layout techniques, you can get a really nice layout that fully resizes in most browsers (even in IE5).

  16. TwoHawks
    Permalink to comment#

    Thanks Chris – nice.

    Per Anders comment #6… although you would need to use some php or something to get around inserting inline tag code …one can go ahead and specify the W+H, then add style=”width:Wem;height:Hem;” into the img tag. Of course, then using the ‘class style’ Chris made is not needed either.

    For those interested, I set up my em resolutions to 10px (search the net for pixels to ems) so I do not have to calculate the equivalent Wpx value into a weird em value, so all I have to do is if the image drops in at Width=560 and Height=601, the em’s I set are width:56;height:60.1, and it works great. That’s 1 to 1 ratio… it can, of course, be adjused to anything you want.

    Just to note, I tried dozens of ways to try to allow for specifying the H+W in the img tag and doing the rest from the style sheet, but I do not think its possible.

  17. Yeah…. but 150 kb image size…. what can I say…. ))) thats sucks )))

  18. Hi! could you plz take a look to “www.promisingdesigner.com” website and let me know how do i make its homepage header images expandable in different resolution? plz suggest me with detailed (example) because I’m having terrible headache … grrrr :D :)

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".