Hi

I will probably sound like a complete newbie asking this, but it seems to be one of my blind spots.

 

Say that I have an image that's 500px width x 600px height (according to what my Windows system tells me) and I want to put this image on an HTML file. My questions are:

 

-Is it true that it's best to specify both width and height styling for the image (to reduce page-loading time)?

 

-If I want to specify the size in pixels, how would I do it without stretching/squeezing the image so that I don't damage the quality?

 

-If I want to specify the size in percentage (%), how would I do it without stretching/squeezing the image so that I don't damage the quality?

 

thanks

Yes, I believe you should specify the height and size but it's not good to resize an image using this. Resize the image off the web and then use that, specifying its dimensions.

You should specify the width & height in pixels. e.g.

 

<img src="imagename.jpg" width="500" height="600" alt="Whatever" />

 

The quality will be the same as the source image.

 

If you want it smaller, you can change the size values and so long as it's in proportion, it'll look pretty ok, but you'll still be downloading the full size image for no good reason. If you want a thumbnail, resize in Photoshop/Fireworks/whatever and use that instead.

Thanks your responses helped me understand a bit better. But in reply to Henbast's response, that's another issue I have some problem with:

 

What's the difference of specifying size by something like

<img src="imagename.jpg" width="500" height="600" alt="Whatever" />

 

as opposed to something like

<img src="imagename.jpg" width="500px" height="600px" alt="Whatever" />

 

I'm asking because in some cases I seem to get what I want by using px, and in others by not using it- but I need to know why exactly.

 

thanks

In the img tag, px is implied and you shouldn't specify it. If you are using CSS you use px to signify pixels (as opposed to points or em's).

Thanks.

And what if I put the CSS in the image tag while specifying that I'm talking about style, which would the the correct one then:

 

<img src="imagename.jpg" alt="Whatever" syle="width:500px; height:600px;" />

 

or

 

<img src="imagename.jpg" alt="Whatever" syle="width:500; height:600;" />

You'd use px in that case but you should really just use the width/height attributes.

Thanks!