Real dimension image or <img> width attribute?

Assuming that I have two identical images with different dimension: test_small.jpg (150px x 150px) and test_medium.jpg (500px x 500px)

I want to 开发者_开发技巧display 150px width image.

1) Which usage is better for browser to load? Which is faster?

<img src="test_smal.jpg"/>
or
<img src="test_medium.jpg" width="150px"/>

2) Does the second use will load entire image then adjust image width?

Edit: < /img > tag removed

Loading the smaller image is faster for a couple of reasons.

1. The file size is smaller, less to download

2. The browser doesnt have to resize the file, it just displays as is.

However, the amount of time difference is going to be very small.

Also the img tag is self closing < />

You should never specify a width that is different to the actual image width, as the large image is downloaded and resized dynamically by the browser.

If you want to resize an image, you should do it server side before it is loaded into the browser. Specifying an image width is actually seldom required.

The second one is slower becuase as you asked in your second question, it will download the entire image first. Which is slower because the image is bigger.

Resizing it takes more time too.

You should rarely use the image width attribute, and try to save the image in the size you want on the server first.

here is how you use the image tag

<img src="test_small.jpg" />

obviously using the smaller file will be faster, so use the small file instead