Journal
Em Image Sizing
15 December 2005 › 31 comments
To the Power of M!
Demo: See Example Here (View Source)
Update: This technique also works for: Em Flash Sizing.
I have been seeing a lot of interest growing in how to use Ems for web page layouts. The benefits of using Ems for sizing and positioning are of course the ability to increase font size and allow users to read text at their preferred level of legibility. One thing that often goes overlooked however, is the sizing of images. These are typically left done in pixels, which is unfortunate because as the user zooms in on the page, the pictures still remain quite small by comparison. For a person with vision problems, this helps them read better, but does little to help them in terms of getting the full experience of the web page, as they have to strain their eyes to see your photos.
I began to wonder – Does it really have to be this way? Cannot we, as technically savvy web designers, figure out a way to increase picture size as well? Then it dawned on me, why not style the size of images with CSS, so that they can scale in Ems along with the rest of the body text. This will allow the normal view of the web page to be seen as intended, and will scale images up or down as necessary for those with vision impairments. Sure, this will make the image more pixelated the bigger it gets, but at least we will be taking the visually impaired into full consideration. Observe how the demo image scales perfectly with the text.
The drawback to this method is of course having to pre-define each image size. In other words, you cannot really have an arbitrarily shaped image pulled into an article, or its dimensions will be skewed to fit what you have styled in the CSS. However, many news sites and blogs generally operate with pre-set image sizes anyway, as to not throw off newspaper style layout. So, the choice is yours, go forth in confidence with the power of the M!
Discussion + Dissension
Comments closed after 2 weeks.
#1 Zeerus
this is great Nathan, definitely not something I would have ever thought of. My only problem is the distortion of the images. increasing font size makes it look pixelly while decreasing font size makes it look way too sharp and jaggedy
#2 Stu Nicholls
I did some experiments with this earlier this year and came to the conclusion that you really need to have the image sized two or three times as large as the default page size. This way it does not get ‘chunky’ as it gets larger. It does mean, however, that it takes a little longer to load.
#3 Shawn Grimes
Very interesting Nathan. You’ve got lay off on the informative articles for a couple of days so I can catch up ;-)
#4 Jonathan
This kind of reminds me of how Opera re-sizes websites by default. Instead of just re-sizing the text, Opera will actually ‘zoom in’ on the entire site, re-sizing everything.
#5 Ed Knittel
No offense – but how is this different than “CSS Scale Image Html Tutorial” from 2 years ago?
http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm
#6 Nathan Smith
Stu: That’s a good point. If you’d already covered this topic, then I apologize for going over it again, but to my knowledge I hadn’t seen a tutorial on it, so I figured I’d try to whip one up.
Jonathan: That’s actually what got me to thinking. That’s the one thing I really like about Opera, and feel that it does better than any other browser, so I wanted to see if I could recreate that scalability effect.
Ed: Good point, they are remarkably similar. I hadn't heard of Big Baer's tutorial, so I apologize for bringing this topic up again. If I'd known it was already attempted, I wouldn't have bothered. I guess the difference would be setting all images within a certain Div, vs. assigning a class to each one.
#7 david
hmmm. so instead of makeing pages lighter we make them heavier by putting images in that will keep there integrity as they scale? two thumbs down. I understand the reasons but the outcome is lacking.
#8 Ed Knittel
No, Nathan – it’s cool. No need for apologies. I just didn’t see a difference and I had remembered reading the article back on 2003. A quick Google search for “scale image as text size changes” confirmed my suspicions:
http://www.google.com/search?q=scale+image+as+text+size+changes
#9 Nathan Smith
David: Just to clarify, I never said that you need to put in bigger images just to accomodate the resizing. Stu simply mentioned what would be necessary to have them not get pixelated. I think you’re being a bit harsh on him, as he was just trying to help. However, if you put a larger image and then force it to a smaller initial size, it would still get pixelated. It’s a trade-off either way.
Ed: I guess I should’ve tried that Google search myself, before posting this article. Oh well, what’s done is done. I think that my demo is a bit more succinct, so hopefully it’s still justified in its existence, and will prove helpful.
#10 david
being a bit harsh? first off this is my opinion thank you very much, second i dont think what i said was harsh, and if it came across that way, my apologies to the writer. i never said that he said to use a bigger image. i am saying that the second someone raises the point size of the text the image distorts. or if somebody has a higher text level set initially it will distort. I believe IMHO that makes the look of a site designed this way unpolished and makes the artist look unprofessional.
edit: by the way i was talking to you not stu :)
#11 Nathan Smith
David: Ah, no problem. I suppose I felt the need to stick up for Stu, since he’s sort of a venerated CSS saint, or something like that. If you were speaking to me, then by all means, tear it up! I realize that this resizing technique has its drawbacks. My main point in presenting it was to make photos at least recognizable to the vision impaired, albeit a bit ugly to the rest of us. I didn’t mean to sound bossy. I highly respect your opinion, talents and portfolio.
#12 Matt Thomas
Nice work, Nathan.
The beautiful thing about elastic layouts is that it makes browsers’ text resizing capabilities useful to an audience beyond just those with degenerating eyesight. In the short time that mine’s been live, I find myself, more often than not, using a larger-than-default text size. It’s a method that allows anyone, from your mom on her crappy 800×600 screen at work, to your buddy with the 30” 2560×1600 display, to read the site comfortably, the way you intended. As pixel density continues to increase with every new Cinema Display, et al, that comes to market, resolution-independent interfaces are going to become increasingly important.
Complaining about pixel distortion really misses the point. It would be fantastic if users had the bandwidth, and browsers (other than Safari, which already does) had a good enough renderer to give us high-resolution, or effectively resolution-independent, web sites. But now, with what’s possible currently, this is a method that allows all users—not just the ones with a Mac and OS X’s fantastic Universal Access features—to quickly and easily size a page to fit their needs. And really, what seems more “professional” when you need to resize a site—pixellated photos or a fixed-size layout that breaks?
#13 david
hey no harm done Nathan… and like i said I didnt mean to tear it up or insult your efforts.
I highly respect your opinion, talents and portfolio.
lol nothing worst than an anonymous commentor. ;)
#14 david
Matt we could argue that point all day. the bottom line is whether you believe that the end user should have control over the way the site is presented or YOU the designer. for a site like yours that is content heavy and graphics light, you are more than correct (IMHO) to use ems and let the READER select how the site is viewed.
however if you are speaking of my site, which is more visual depenent, then I wish to choose how the user views the site. and if a reader needs to raise the point size more than 2 notches ( the point at which my site ‘breaks’) then so be it.
#15 Ara Pehlivanian
I’ve use EMs in my new site design, even in the Firefox specific rounded corners. They grown when you zoom :-)
#16 Torsten
we used a year ago a similar technique for our website www.medienfreunde.com
there is a flash-header which also grows, if you change the font-size. the benefit of flash is the smoothing of images. then they look nicer in large sizes.
just try it by using the font-scaler in the top-right corner.
here is a short tutorial
#17 Jason Beaird
Well, I for one hadn’t read anything about scaling images with ems until now. Great idea Nathan. I look forward to fiddling with it sometime.
On the topic of giving this technique two thumbs down for needing to have larger images…give me a break. The advancements the web standards community has made in REDUCING file size have definitely given us room to make a conscious decision like this to benefit the user experience. If I have an image that I wanted to display at 150×150 and resized and saved it for web as a high quality jpg from Photoshop, it would probably come out around 6k. If I took stu’s advice and left it 3x larger at 450×450, then I could save it for web as a medium quality jpg (since it would be resized down most of the time) at only 12k. Even if we’re talking about a dial-up connection here, I don’t see how that 6k difference would make a big impact, especially when we’re weighing the benefits. Just my 2 cents.
#18 Lauchlin
When it comes down to it, it’s about user experience, and I think you hit the nail on the head with using EM for images. Though I do agree the pixelation might make this technique almost useless at some point. I mean, they may be able to see the image, but very poorly.
And should the content be more important here? If the audience you’re trying to include is visually impaired, and your picture is important to the content, why not include a link to a higher resolution image? That way, the user can decide which way they want to go.
#19 James Mitchell
Nathan – thanks for this, I had never thought of it. I am excited to try it out on a few things.
The best part of all is that it still validates (always a concern I check out). Bravo!
#20 david
I forgot I was talking to the web standards bunch here :) forgive me a lowly graphic designer who just jumped on the bandwagon of standards design and just got his first blog. I have been bogged down with a need to design something visual to help inahce the content and the aspect of minimal design crosses my path … well minimally.
yes that was full of sarcasm. Look I am not bashing Nathans ideas guys. If you all want to use the tecnique, go right ahead. I think Lauchin’s idea is a nice solution so all you guys who ponder how the end user is curseing thier monitors because they can’t ‘fix’ how it looks to their liking ( even though it was ‘designed’ to look other wise ) can have their way. and aslo , look, I am not the grinch. I understand a bit about usibility and accessibility albeit at a beginners level ( just jumped on the standards boat and gave tables a rest)
BUt I am still in the camp, and perhaps always will be, that believes that we ‘design’ sites from the code, accessibility, userability and graphics. I am just not going to limit my design to som blogesque style just so I can wag a finger at those whose sites ‘break’ when you increase fonts size to much. too much in this case being from like ‘small’ to ‘larger’ (IE).
Dont forget how cool design is guys, stop thinkingthe blander i make a site the more useable it is. Zen Garden teaches us other wise.
lastly Jason, just my two cents: if you only have one or two 12k images one a page great, but even yahop, walmart and amazon have more images than that on a page, get me.
#21 Nathan Smith
Ara + Torsten: Those are both pretty sweet examples of Em sizing, especially the Flash resizer on that page. I really gotta learn German, so I can fully appreciate some of these great sites that are out there.
David: I don’t even think it’s an issue of blandness vs. usability. If anything, the CSS Zen Garden shows us that both are possible. I tend to agree with you though, and be of the mentality that if I made the site, I want it to look how I intended. This is not always the case, as users are increasingly demanding.
As the web evolves, and the 2.0 buzz-word is upon us, we’ve entered a new paradigm of design. It is one that is focused on the user. We are no longer operating in a paper environment, so we need to learn to give up some of our biases that have carried over from the days of working in print design.
For more on that: Andy Rutledge – Give Your Website Away
#22 Wesley Walser
I enjoyed the article, and considering the buzz about EM’s over just the last two weeks (I know they have been around forever but just look around people love them all of a sudden) it’s sure to attract some readers.
Torsten: When you said flash I had second thoughts about clicking your link, but when I did I was impressed. I never actually realized how good Flash’s image smoothing was until I compared the site you linked to the image in Nathan’s demo. Nice work!
Nathan: Your pulling out some good stuff here recently.
#23 david
hope i am not wearing out my welcome ;). yeah i agree Nathan it should not be an either or situation, exactly my point. but i find more and more that when people get into this new craze called blogging and more to the point people who have MS Paint calling themselves designers or people without an Educated design background(schooling or self taught) start getting into the picture ie.
and i am generalizing a bit, most developers. then the stage is set for a nice rousing discussion of what the web should be. And i encourage such discussion. And i for my part and trying to bridgethe gap between designers and developers. I consider myself a desiloper :)and yes Andy makes some good points in that article i have read it many times before, my only debate to using it here as a reference is ; arent we the web designers that he is talking about handing the project over to, isnt it our charge to think about those things such as who will be using the site? if Me as a designer need to turn my own web project over to other people to handle this taks,then why am i a designer? I believe that we should consider ( and i do ) what andy says for every project because we as designers can fall into the trap of putting our personal preferences into a site thinking we ‘know’ what the user wants. but at the same time there needs to be a balance. a blog needs to be nothing more than text on a page because all the users are doing is reading. that is the mission of a blog. knowing what the fundamental use of a site is key and everything else is complimentary. content comes first. but there IS room for structure, and all kinds of structure, if design is nothing else it is the communication of ideas through visual expression. lets not forget about the visual.
Nathan please let me know if am wearing out my welcome, i dont mean for this to get too far off topic.
#24 Nathan Smith
David: Nah, you’re not wearing out your welcome. It is good to see constructive, evaluative dialogue. I understand what you mean, that we are doing more than just communicating. We are telling a story: through words, presentation and accessibility, etc. I find myself struggling through these various topics, weighing the importance of each, trying to strike a balance.
Heck, we even predispose people for or against us in how we type: words we choose, and puncutation or capitalization (not) used. On my wife’s blog, she talked briefly about Psalm 137, and a whole discussion ensued over the validity of an exclamation point in English that was not there in the Hebrew.
#25 Andrew Ingram
I’ve experimented with em image-scaling in the past, I came to the conclusion that even if you use larger images than you need, browsers are really bad at scaling down. Chances are you’d get nasty aliasing effects just viewing the image at the intended size.
I’m holding out hope that all browsers will soon have smooth resizing of images, the same way that the windows image viewer displays things.
#26 Nathan Smith
Andrew: I agree, the practicality of this example is still somewhat sketchy. I just wanted to throw this method out there so that people could start thinking about and improving upon it. I was really impressed to learn that Flash can be scaled in Ems. I’ve been thinking about that off and on all day today, and want to work up some demo to try some things out. That has huge implications for the way that sIFR could be rendered, for true scalability.
#27 david
ahhhh now you are talking Nathan. i wonder how easy it would be to produce an image of flash in say dreamweaver. I know that you can create flsh buttons from inside dreamweaver, I’ll go check and come right back. off to see how difficult it would be to create a scalable image from inside dreamweaver withouth opening flash…..
wow
style media=”all” type=”text/css”>.fla {
height: 7.3em;
width: 10em;
display: block;
}/style>
object class=”fla” type=”application/x-shockwave-flash” data=”images/slim_logo.gif” border=”0”>
param name=”movie” value=”images/slim_logo.gif” />
param name=”quality” value=”high” />
/object>
(had to take out the beginning ‘bracket tag to get it to show here)
stumbled on something pretty interesting. was fooling arround with Torstens’s idea. we may get this thing sorted right here Nathan lol.
seems you can use the “flash engine” with more than jsut swf files. most likely isnt supposed to be used this way but it didnt throw me any errors and validated fine.
#28 Nathan Smith
That’s pretty intriguing. Would you mind working up a rough demo of what you’re referring to, and then posting a link in the comments? I think I’m starting to grasp the concept, but it would help if I could see it in action.
#29 Andrew Ingram
I put that above code in your example Nathan (switching the img tag for the object tag) and it rendered the same as before but using the flash engine (given away by the ability to right-click see the flash menu). It didn’t do smooth resizing though. I suspect what you’d want is a flash file that implements a smooth-resize algorithm and takes an image path parameter. Then it would just have to display the image it loads across it’s full canvas and it should be magic.
I’ve never used flash in my life so I can’t implement it myself, but I can’t imagine it being anything more than a trivial matter for someone who knows flash.
#30 david
http://www.climaxdesigns.com/slim/flash_em_test.php
ahhhh im not completely sold. the image is 90k which is way too big but i was trying to keep some data thinking the flash object would reduce the size. but it didnt. I think you would actually have to create it in flash. I tell you though, there was a really interesting article/tutorial that was put out about unobstructive flash where the guy was able to send variables into flash from the page. i wish i could find that page.
my theory would be that if we could set up one single flash file to load a jpeg or gif that we could single from outside of the piece. that would solve it. You could then create a list of images inside a java script and call them where ever you wanted them on the page using the flash objedt.
anybody remember that web page where the guys had the flash that you could size and introduce text into it?
#31 Nathan Smith
David: I think I figured out a way to shrink the filesize, even moreso in Flash than the actual image. I’m not sure how or why that’s even possible, but it works just fine. I went ahead and wrote up another article and tutorial on it, so that we can continue the discussion there: Em Flash Sizing.