image size in html

[smallcompany]

I never paid too much attention to width and height attributes in html code. I did notice that images can be placed with or without those attributes applied. If attributes are there and you replace the image, they (attributes) have to be fixed to match the original size of the new image.
If attributes were not there, new image will look fine, in its original size.

Now I wonder about “width” and “height” and their purpose and necessity.

Thanks

[thecoalman]

If you set the width and height with HTML then it will display at whatever size you specify regardless of what the actual size of the image is. You don't have to use the actual size of the image. You really don't want to do this unless you have a good reson too, browsers don't do a very good job of resizing. You'll get aliasing on images that are scaled down and images that are scaled up will look pixelated. There's other reasons too such as optimization. No sense serving a really large image if it is only going to scaled down anyway.

When you specify the actual size I believe it may slightly speed up the rendering of the page because the browser won't have to determine what it is.

[penders]

When you specify the actual size I believe it may slightly speed up the rendering of the page because the browser won't have to determine what it is.

...and if the browser knows the size of the image (the space it will take up on the page) before having to start downloading it then your page won't jig-around when the sizes do become known - although this will depend on your layout, and is perhaps not quite so noticeable on a fast connection.

[wrgvt]

People who hotlink images usually don't specify height and width. I've used this to my advantage in the past. I've renamed the original image on my site and replaced the hotlinked image with a huge image. The hotlinker expects something to be 100px by 50px (for example), and when I replace it with something like 450px by 250px, not only do they get an image that is useless for them, it blows their whole page setup out of the water.

[thecoalman]

I've done that myself, instead though I used a transparent .gif that was 1X32000 .... lol

Usually your hot linkers are from myspace or other sites like that and really have no technical skills, I'd imagine many of them spent many hours trying to figure out what went wrong. :)

[smallcompany]

Now you've touched something else. I am curious about that too (image protection), because I’m not getting it how you setup some unusual size while showing image on your site right?

So you say, no size by default should be way to go?

I think my Dreamweaver puts size by default, but not always though. I wonder why?

Thanks for input.

[thecoalman]

All you're doing is preventing "hotlinking" , useful for preventing someone from stealing bandwidth and using your images on your server on their site but it's not going to prevent them from downloading it and putting it on their own server. You can do this with htaccess if you have an apache server. The server looks for the referrer and it sends an alternate image or not image at all depending on what you want to do.

what happens is the person hotlinking will have the imge cached locally, they'll see the original image on their site. Unbeknown to them its been replaced but will look fine because they are still looking at original image in their page. If they have not specified a width and height the image will display at its native size, for example the gif I mentioned will cause a huge scroll bar to the right. If it's liquid layout it becomes even worse for them because a single paragrph many sentences long will now stretch way past the point of what is viewable without scrolling... quite evil isn't it. :)

For a default I use the image size but itsnopt all that important. Whether you use no image size or the correct image size is only going to affect the rendering speed in the browser and as mentioned by the other poster it may even be imperceptible if you have fast machine.

[Romeo]

So you say, no size by default should be way to go?

This can't be said unless we know that DTD you use, because it may depend on the Document Type Definition whether these attributes may be mandatory or not.
In most DTDs that I know, it seems to be not mandatory, although recommended.
So look at the specs and code your pages accordingly. And then run your pages through a validator: [validator.w3.org...]

Kind regards,
R.

[edited by: Romeo at 2:35 pm (utc) on April 29, 2008]

[penders]

This can't be said unless we know that DTD you use, because it may depend on the Document Type Definition whether these attributes may be mandatory or not.

AFAIK the width and height attributes of the img element are not required under any DTD. IMHO the specs [w3.org] don't necessarily state they are recommended either.

width = length [CN]
Image and object width override.
height = length [CN]
Image and object height override.

When specified, the width and height attributes tell user agents to override the natural image or object size in favor of these values.
:
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.

The width and height could be specified in the CSS instead.