Maybe Im missreading this article, but do you all agree?
http://blog.htmlhelp.com/2007/05/23/...ge-dimensions/

Basically the guy is saying that css shouldnt be used to define image height/width. Is that true?

Yes, it's true, the height and width should be defined in the HTML on the <img> tag. Height and width are not STYLE attributes, they are part of the page structure and belong in the HTML.

Well that makes sense!

Depends on the element. In the case of an input element that uses the image type for submit purposes, you have to in order to make sure the element is sized properly and retains its dimensions simply because there isn't an alternative.

In the case of an img element, yes, use width and height...that's what they're supposed to be used for.

Hello All -

I have to disagree with our Red Lady and say that yes, images may be sized in CSS, and that sometimes there is good reason to do so. First, here's a link to W3 Schools (excellent learning site) to learn how to do it:
http://www.w3schools.com/css/css_dimension.asp (click on any of the links there and try it yourself)

Now... why would you want to do it? Well, I'm looking forward to seeing the comments of other web designers who use this technique, but I will tell you one good reason -- to quickly style all photos to be a smaller and equal size to fit into a gallery page design.

Regards -
Scott

"but I will tell you one good reason -- to quickly style all photos to be a smaller and equal size to fit into a gallery page design."

that's not a good reason, as it will distort the images/reduce quality, is a waste of filesize (bigger image reduced to fit is still the same, larger filesize) and it is easily accomplished in a good image editor with actions/batch processing

- If you don't use width and height, the image will have its "natural" dimensions
- If you do, it will have graphically the dimensions you tell it. So, you could say it is a way of showing the image, and not the nature of the image itself. Said this way, it seems logical to use css to define it, as it is a presentation matter. So, i don't think the answer is so straight ...

Osweb,

I agree with the second part of your claim, good example

that's not a good reason, as it will distort the images/reduce quality, is a waste of filesize (bigger image reduced to fit is still the same, larger filesize) and it is easily accomplished in a good image editor with actions/batch processing

Hello -

To be clear, you could use CSS to set all images on a certain page to be the same height (that would not distort them, since it would allow for different widths). I understand what you mean by batching the images, but then you would required a second set of thumbnail images to be loaded and linked to the larger sized images. This technique does not require a second set of images.

Yours -
Scott

davemies was dead right on this one, and quite frankly I'm surprised no one else has pointed it out yet. Scott, your example is terrible.

Let's take a fairly common example of a storefront with 10 images that need to be stored in thumbnail size. The average thumbnail is approx. 1/10 of the file size of a full-size image, so the amount of storage space 10 thumbnails would take up (the equivalent of 1 full-sized image) literally comes back tenfold on average on bandwidth download.

Let's also take into account users (you know, those strange people we supposedly build sites for). Users will get a higher-quality thumbnail, because as davemies quite rightly pointed out they'll have a thumbnail that is resized by an image editing program as opposed to a browser, a program that was never built to resize images properly in the first place.

Not only that, they'll get it almost ten times as fast because they're not forced to wait for a full sized image to download and then get resized to dimensions that a browser may not be able to handle.

This wasn't what CSS width and height properties were intended for: it's just a bastardization by webmasters who don't know what they're doing.

davemies, very good call and big up yourself. To the rest of you that disagreed with him...he's the only one of the lot of you that made sense.

I'm with Adam and Davemies - regardless of what you set the size to in CSS or HTML, the file sizes don't change and you can easily weigh down a page.

If you're going to do a gallery, don't be lazy about it, make your thumbnails in a graphics program. If you use Photoshop, it HAS some automated functions that will resize batches of images to your specifications and it does it's pretty fast.

Hello All -

It looks like we're destined to disagree. The arguments above focus on past issues, and fail to consider web user needs and trends of today. There are file formats coming into play, that do not lose resolution on scaling, and do not cause bandwidth problems (#3 below).

I gave only one example of why you might consider using CSS to set image sizing/scaling. Here are some other points for your consideration:

1. You can scale images along with text (when you use your browser's text size options), by setting an em for the dimensions of images using CSS. This is an excellent technique for a "liquid" layout.
2. Accessibility is enhanced by controlling image scaling with CSS. Why have images overlap text or force text down in your layout on smaller screen devices? Use CSS image scaling. This is a great technique to address usability on small screen devices.
3. The scaling issue goes away when you use SVG (Scaleable Vector Graphics) which render precisely at any size. The format is not fully implemented (Apple and Mozilla/Firefox are on board -- guess who's lagging?), but the W3C.org continues to drive this important graphic format forward. See Article. See also W3C.org SVG area.

Bottom Line: Browsers do scale images, their ability to do so continues to improve, and some old formats of images scale better than others. Meanwhile, SVG promises to remove the scalability issue. Bandwidth continues to increase. Scalability of images using CSS should be considered as an intelligent option to serve web visitors, in fluid layouts, and particularly on a variety of modern devices. For these reasons, CSS image scaling techniques should be a valued tool in every webmasters' arsenal.

TUTORIAL: Here's a link to a CSS image sizing tutorial.
Happy New Year -
Scott

"You can scale images along with text (when you use your browser's text size options), by setting an em for the dimensions of images using CSS. This is an excellent technique for a "liquid" layout."

no it isn't. apart from the image quality issue of being resize in a browser (via css) which makes it looks **** (SVG aside, which isn't a consideration at the moment, and still wouldn't be for photos and such like which can't be vectorised - yet) then imagine an image that is say 800px wide at 1em but then you knock up the text size a couple or three notches and WOAH - suddenly your image is like 1600px or something wide and you've got horizontal scrollbar and it looks way messy: pretty much the opposite of a liquid layout in my book and most people's i'd say.

browsers scale image so they look like crap and always have done and there is no reduction in filesize.

you can talk about agreeing to disagree but you're talking bollocks

And they're all bad points, with the possible exception of #3...if/when everyone's on board with it, including two key players (with some overlap between the two) that you have conveniently omitted.

1) and 2) don't address the issue of file size, which is especially important in the case of #2 where small screen devices such as a Blackberry are often used in areas where Internet connections are slow and therefore a properly sized image is a must. They also don't address the issue of scale, as you mentioned.

3) has a very limited scope at best. To understand the reason why, go dig out your digital camera, or failing that, go find an old baby picture and drop it into your scanner. Now go into Photoshop (or your favorite image editor, if you prefer) and open up the resulting JPG or GIF or whatever raster format it's saved in.

Now go ahead and convert that JPG, with all of its detail and nuances, into an acceptable vector art equivalent (especially if you have one of those high megapixel cameras...whats a great use of your time, eh?) Now, if you're running an e-commerce store with at least 100 product shots, repeat the process at least 99 more times. Havin' fun yet? I just bet you are.

Bottom Line: SVG graphics aren't ready for prime time yet, and probably won't be for quite some time. They may have a few limited uses, but until non-web devices such as cameras and scanners are able to render images in vector format (which is probably 5 or more years away), this isn't an idea that will serve website owner or web user needs of today.

Scott, you also broke one of the cardinal rules of WMT: Thou Shalt Not Disagree with LadyNRed, Unless Thou Art on Her Level. Go back and read her posts sometime...every one of them. Read them again if you have to. You'll see just how far you've got to go in order to be the expert you think you are.

LNR is thy goddess. Bow and worship her accordingly (or one of the mortals with an axe to grind like me will kick your ***. )

Dammit, davemies, you're not supposed to mention photos when I'm writing a post that does the same thing.

Hello All -

Let's let a real world example be our first "expert" here. Take a look at this scalable image example:
... Scalability is the issue - Try "scaling" the layout up and down using the "View" menu to increase or decrease your text size. Note that the images (a JPG and a PNG scale too). This works fine in Safari, Netscape, and Firefox.

Read the notes under each picture and have a look at the CSS code to see how it's done. Note that the images cannot scale larger than their actual size (using "max" settings for width and height in CSS), and so will not distort.

Will the real "Experts" please stand up: Hey... I agree, it's not the number of posts you have here, or what you say can be done, or cannot be done -- but what you actually do successfully in web development that shows your web "mojo." So... here are some folks with real-world experience who have written tutorials/articles in favor of CSS image sizing controls:

• Alex Walker - Article on "Stretchy Images with HTML & CSS". Alex manages design and front end development for SitePoint.com and writes SitePoint's monthly design newsletter, the SitePoint Design View. He also maintains Pixel Perfect, SitePoint's Web Design Blog.
• Stu Nicholls of CSSPlay (a respected site now listed on the w3c.org website), has some great examples of EM sizing images using CSS.
• AListApart, the highly regarded web design ezine, ran this article which includes a section on "Elasticizing Images": Elastic Design. I think everyone will agree that AlistApart publishes authoritative articles. You will have to judge the relative value and merit of this one by Patrick Griffiths is a freelance webmaker based in London. Mr. Griffith made an excellent CSS elasticity example page with "elastic" photos on it.

And, Mr. Davemies, I looked up "Bullocks" and learned it specifically means a "castrated steer." I suggest you don't castrate your web potential by ignoring CSS image scalability.

Best regards -
Scott

Scott, you just managed to stumble, bumble, fumble and prove davemies 100% right. But, since you're so busy being an expert by following other experts and therefore are too pigheaded to see the flaw in your own logic, I'll break this down in terms that even you can figure out.

First of all, an example is not an "Expert", which means that you must be referring to the person providing it (i.e. you). Get off the friggin' ego trip, already.

Second, your example manages to illustrate the distortion effect that occurs when your PNG and especially your JPG are resized. Start with the image at its maximum dimensions (which is as far as your image can be resized to) and then go down about 2 or 3 sizes. Do you see what happens? Your rounded lighthouse "squares off" at the top in both cases, and the JPG does some other weird stuff as well in the same area. By the way, you get a similar resizing effect in IE...you know, that "lagging" browser.

Second, a direct quote from the Sitepoint article you cited (important point highlighted):

Of course, browsers can and always have been able to resize images on the fly. It’s just that they’ve always done such a rotten job at it, so we designers tend to ignore that ability.
The key to this trick is limiting the stretchiness to the parts of the graphic that matter the least — in this case, the connecting arms.

So the "expert" that shows us all the light goes so far as to say exactly what davemies, LNR and I all said to begin with: browsers do a bad job when it comes to resizing images. Why would you not use a graphic editor, something that is built for this specific task and will be able to correctly optimize the image the way the designer intended (and much more importantly, create a much smaller image for the user to download)? Keep in mind that if you're going to answer that question, you're going to have to come up with a different argument because the one you just presented clearly showed the exact opposite.

Stu Nicholls' example clearly distorts the text within the photograph when the user resizes his/her browser to any point beyond the original image dimensions (240 x 180), since only the horizontal dimension is resized and not the vertical. This is exactly the point here...the image was never intended to be resized by the browser in this manner, and it shows. You'd have to be blind not to see the example.

As far as your last example goes, another quote is in order:

The image should be sharp at the default text-size setting, but aspects of it can become unsightly as it shrinks or grows with the text.

Your example illustrates the problem. Two of the examples that you cited tell you what the problem is. All three examples illustrate the problem. The article itself points out the problem in an indirect sort of way. How many times do you have to be told why the idea and example is silly before you get it?

Then again, I see where you misinterpreted what davemies had said because you substituted a "u" in place of an "o" and came up with a different word. The word is bollocks, which is British Commonwealth slang for "nonsense" (odd that a Finn used it, though...are you guys part of the Commonwealth? If so, I was not aware of that.)

Just so you know exactly what he told you, here's the meaning of "talking bollocks"

I suggest you don't castrate your web potential by misreading what others tell you and/or only selecting the parts that appear important to you while making your points in the most bombastic manner possible (seriously, dude, you need to lighten up on the bold...you come across as a corporate management type who lost touch with reality as soon as he took his first step up the ladder.) You know nothing about what you speak...at least on this topic.

I agree, it's not the number of posts you have here, or what you say can be done, or cannot be done -- but what you actually do successfully in web development that shows your web "mojo".

Excuse me ?? If you're even suggesting that I'm not working successfully in the web world you are dead wrong. My presence here has nothing to do with post counts. I read all those 'experts' you've chosen to show as examples, have done so for many years. I use a lot of the techniques that they put forward - where it's practical and where it's widely supported ! I work in the real world where I must be sure that my work is displayed properly in as many browsers as possible. As clearly shown, you CAN do some image scaling, but you don't WANT to because, well, it turns out badly.

Being on the bleeding edge is wonderful if you can do it, it pushes the envelope for us all.. but we don't develop sites for the bleeding edge, we develop sites for what's used and supported now. Until things advance to the point where that bleeding edge is now (making a new edge further out), it's foolish to develop 'everyday' sites using such techniques.

If you're teaching people to use this sort of method, you're setting your students up for some disappointments. Let them know its possible.. it's just not PRACTICAL.

LNR is thy goddess. Bow and worship her accordingly (or one of the mortals with an axe to grind like me will kick your ***

Adam.. you're embarrassing me

"Scalability is the issue" - doesn't work in IE6

* winks at Diane * You know how your code standards and sites always get to me in...y'know, that special way.