Resizeable Images (At Full Resolution!)
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.
*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.
Loading ...
1
Does this mean that the image size will be bigger than it should?
Comment by Chad — January 29, 2008 @ 3:27 pm
2
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.
Comment by Mathew Byrne — January 29, 2008 @ 3:30 pm
3
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.
Comment by CSSnewbie — January 29, 2008 @ 3:49 pm
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.
Comment by Tomek Pęszor — January 29, 2008 @ 4:00 pm
5
Kewl Bananas!
Im guessing this is similar as the enlarge in IE7??
Comment by Jermayn Parker — January 29, 2008 @ 8:42 pm
6
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…
Comment by Anders — January 30, 2008 @ 2:41 am
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?
Comment by Lars Pohlmann — January 30, 2008 @ 2:57 am
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
Comment by Tomek Pęszor — January 30, 2008 @ 4:19 am
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
Comment by Dennison Uy - Graphic Designer — January 30, 2008 @ 8:47 am
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.
Comment by Dennison Uy - Graphic Designer — January 30, 2008 @ 8:49 am
11
@Dennison:
Unless, of course, you belong to that 1%…
Comment by Tomek Pęszor — January 30, 2008 @ 11:04 am
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….
Comment by Chris Coyier — January 30, 2008 @ 2:47 pm
13
a very simple solution and quite effective, thanks for sharing.
Comment by Tino — February 1, 2008 @ 8:43 am
14
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
Comment by Siegfried — February 8, 2008 @ 6:36 am
15
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).
Comment by JB — February 15, 2008 @ 9:50 am
16
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.
Comment by TwoHawks — February 18, 2008 @ 8:22 pm
17
Yeah…. but 150 kb image size…. what can I say…. ))) thats sucks )))
Comment by Steward — April 3, 2008 @ 2:47 am