Image size using ems/exs

December 8th, 2005, 3:36 pm

So I stumbled upon this site discussing the use of em/ex instead of px. then it went on to say using em/ex was also good practice fror images. Now im sure that there will be some distortion/pixlation if the image is scaled alot. I was just wondering how everyone felt about this. I mean designing a site with 800 x 600 in mind is great, but when someone has a higher res dont the images look alot smaller as well as the text if you use px. I have been playing with ems for font size and I think Im fairly happy with the results not totaly sure but I think I am.

Any ideas would be greatly appreciated.

December 9th, 2005, 6:10 am

I know that font-size can be specified in ems, but wasn't aware that ex was also a valid unit of measurement (in a stylesheet, not in print obviously). The thing that confuses me about using ems is that I read that it's a relative unit of measurement which takes into account the "parent" font size. But that means that you have to specify that parent font size in another way, no? Like with px or pt?

Ems for images. I think it's a good idea, but... how would you get specific pixel sizes with that? Wouldn't the image get distorted if you specified 10em x 12em or something? Opera zooms in on images when you increase font size, thereby proportionately increasing the size of the whole layout. It works pretty well.

One way to minimise pixelation might be to specify an initial size smaller than the actual, e.g. create an image that's 640x480, but use width/height to specify 320x240? Of course that has the adverse effect of increasing the page's weight....

K I'll stop rambling now. Maybe this'll get the ball rolling on an ultimately illuminating discussion. :)

December 9th, 2005, 6:43 am

Yeah the use of ems for images is supposed to be similar to the way that opera zooms with increased/decreased font size.

As far as the use of ems for fonts. I have been playing with it and have not specified any parent font size. The thing is that 1 em is supposedly equivilant to 10 pixels OR 1 em is the same as the users default font size setting. So what I have done was use 1 or .9 em for the main body content and then used .8 for footer text. And I guess since I used 1 em for the main body then everything else is that sizes 'child' so far I havent had any problems. I came into this problem because a site Im working on was set to 12px for the main body and the client told me that the 'words are awfully small' Then I got to see it on a hi res monitor and boy howdy they were tiny. Using the 1 em they are still small-ish but I think it is going to work. On a side note 1 em on my box (800 x 600) which is set with font size of 16 they are pretty big, they almost seem larger than 16, but that may be me.

and the images that I was using kinda just a color blurb on the hi res screen thats why I was asking about using them for that.

December 9th, 2005, 7:17 am

Okay. I read a confusing article that implied that a parent element needed its font absolutely specified in order for the relative font sizes to work properly later in the stylesheet. I just found a better article/blog entry that was easier to understand and not so ambiguous:
http://www.clagnut.com/blog/348/

Thanks for sharing the result of your experiments as well, I found that quite helpful. I'm going to have to rework a small site I recently through together for a friend as a result of what I'm learning. Cool, maybe I can even get it to, like, validate. :p

Now, getting back to images, ya, em/ex would easily work for blobs of colour. Of course, if it's just a blob of colour, why not replace the image with a coloured div, using em/ex to specify width/height?

December 9th, 2005, 7:05 pm

Im sorry I was being glib. The images are photographs but A) they are of low quality pictures and B) if you have a decent resolution the images are tiny. so they look like blobs of color.

check it out. I have almost finished the revamp so please excuse the dated design/colors I think the last time I actually did anything to the design was in 99

golfandgamesmemphis.com

the new site which will have the same addy is currently at

http://216.73.113.76/ <--- this is still kinda a bland, Im waiting on new photos and for them to decide which header style they want to use ( i gave them option overload 24 )

any tips would be lovely. and speaking of validating I got it to validate locally. However when I posted it on the new host it doesnt validate. <-- sounds like maybe I should start a new topic on the difference in locally and actually validating and things that are different.........

December 9th, 2005, 8:44 pm

I see what you mean. I'm at 1600x1200, and the header photo on the original site definitely looks tiny. So did you try futzing with it and seeing how it looks if you specify the size with em/ex instead of px? =]

December 10th, 2005, 9:58 am

No I havent taken the time to play with that yet. And I need to do some more reading. There was something I read about making adjustments. The 1em = 10.000666 px (or the browser default font size, this is part of what is confussing me) and that 1ex = 6 px. And since the ex is easier to round/get easy conversion that the ex is the prefered method. But still Im not sure about how to set the sizes so that it doesnt just blow up gigantic and distort. Maybe there is a max setting that can stop the dynamics from getting rediculous. Because I would think that regardless there is going to be some distortion and pixelation, and if its a big jump then it might be better to just have smaller images than large distorted ones.....

December 10th, 2005, 1:45 pm

I don't understand how 1em can absolutely equal anything if it's a relative unit of measurement. The article to which I linked earlier stated that "medium" in every current browser is 16px. What the author did was start with a "base" size of 10px using percentages (i.e., specifying font-size=62.5% in the body selector) and then use ems for the rest of the document.

Okay, so I'm clear on how that works, I think. But it makes sense, because every instance of "font-size" in the stylesheet then has a reference from which the font's size can be calculated. But what would img width/height use as a reference?

Heh, I think I'm confusing myself. =]

December 10th, 2005, 2:46 pm

yeah I know what you mean. Im not sure but I think that if you use ems for images (I still havent played with it *SLACKER*) then it uses the base size. For instance
http://www.bigbaer.com/css_tutorials/cs ... torial.htm

shows three images and has em settings for the last one. Im still a bit confused on converting. Something like 7.5 em = 120 px. for images........ Im dizzy maybe Ill go play and come back with some actual relative info. Plus I gotta get some new photos cropped/sized/etc for the site and I should probably be working on that instead of cruzing in here

December 10th, 2005, 6:36 pm

ok sorry for the double post an all but, I have now made the change in my css so that width and height are in ems.

Code: [ Download ] [ Select ]

img.left{
border:none;
float:left;
margin:10px 10px 10px 5px;
width:16em;
height:11em;
}

1. img.left{
2. border:none;
3. float:left;
4. margin:10px 10px 10px 5px;
5. width:16em;
6. height:11em;
7. }

the image is actually 320 x 240, I devided this by 16. this was a bit to large 20em x 15em ..... so I droped the properties down by 66px or 4 ems this seems to be working but I only have 1024 X 728 so since you had mentioned that you had a killer huge res could you check it out for me? It seems to scale ok but like I said I dont have the best res to make sure it doesnt get totally whacky.

http://216.73.113.76/

I still need to get it to bew a little more fluid so that it at least takes up a little more screen realestate.......

December 11th, 2005, 7:14 am

The layout gets all wonky when everything is huge, but I think that's to be expected to some extent. The image itself retains its fidelity surprisingly well even after being scaled up a few times.

December 11th, 2005, 10:01 am

Yeah I have the lay out divs set at an exact px width. I have nt made that part fluid so it is to be expected to ge ta littel wierd. Thats the next thing Im going to work on. But first I have to make some header images. So guess what Ill be doing all day........... headers/fluid layout......woooo hoooo

thanks for checking it out though. And I had noticed that the image didnt get to bad distorted but I wasnt sure about real high res. Thanks again.

December 11th, 2005, 11:45 am

When using 'em' you have to set the parent font size, yes. It is recommended to set it using percentages, like so:

font-size: 80%;

Then you set the sizes of the rest of your page elements in em's where it is logical.

Logical:
Setting a background image that repeats on your header and setting the header's size to 100em makes it fit the font and page.

Not Logical:
Setting the width/height of an image to 100em would only result in a pixelated image. This is not recommended.

I recommend reading this article on the topic: http://www.alistapart.com/articles/elastic/

December 11th, 2005, 12:43 pm

Nice article. Thanks for the link, Truce.

December 11th, 2005, 4:28 pm

Truce wrote:

Not Logical:
Setting the width/height of an image to 100em would only result in a
I recommend reading this article on the topic: http://www.alistapart.com/articles/elastic/

While that may not be logical, that is basically what I did. And it seems to work ok, I still need to elasticize my layout, I have been touting the jelo-mold method using css to make for adjustments, this was a combination of %s and pxs I think. I cant reember I have been reading so many articles on liquid/elastic/fixed layouts..... but the jelo-mold is quite a bit of coding that even with the FF web dev toolbar Ihavent completely gotten my head around it yet. I understand the principals(les???) but I cant seem to make it work out. I dont think I have any actual px/% set for font size but the base size is 1 em which is what Im using for the main body text. I divided the pixel size of my images by 16 to come up with the # of ems to use to set width and height. It seems to be ok, only that the layout is set in pixels so if the text/image size is adjusted the layout does not respond accordingly. once I get that working I should be about done I think....