Images In HTML - Learn Web Development | MDN

You can use the width and height attributes to specify the width and height of your image. They are given as integers without a unit, and represent the image's width and height in pixels.

You can find your image's width and height in a number of ways. For example, on the Mac you can use Cmd + I to get the display information for the image file. Returning to our example, we could do this:

html<img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" height="341" />

There's a very good reason to do this. The HTML for your page and the image are separate resources, fetched by the browser as separate HTTP(S) requests. As soon as the browser has received the HTML, it will start to display it to the user. If the images haven't yet been received (and this will often be the case, as image file sizes are often much larger than HTML files), then the browser will render only the HTML, and will update the page with the image as soon as it is received.

For example, suppose we have some text after the image:

html<h1>Images in HTML</h1> <img src="dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" title="A T-Rex on display in the Manchester University Museum" /> <blockquote> <p> But down there it would be dark now, and not the lovely lighted aquarium she imagined it to be during the daylight hours, eddying with schools of tiny, delicate animals floating and dancing slowly to their own serene currents and creating the look of a living painting. That was wrong, in any case. The ocean was different from an aquarium, which was an artificial environment. The ocean was a world. And a world is not art. Dorothy thought about the living things that moved in that world: large, ruthless and hungry. Like us up here. </p> <footer>- Rachel Ingalls, <cite>Mrs. Caliban</cite></footer> </blockquote>

As soon as the browser downloads the HTML, the browser will start to display the page.

Once the image is loaded, the browser adds the image to the page. Because the image takes up space, the browser has to move the text down the page, to fit the image above it:

Moving the text like this is extremely distracting to users, especially if they have already started to read it.

If you specify the actual size of the image in your HTML, using the width and height attributes, then the browser knows, before it has downloaded the image, how much space it has to allow for it.

This means that when the image has been downloaded, the browser doesn't have to move the surrounding content.

For an excellent article on the history of this feature, see Setting height and width on images is important again.

Note: Although, as we have said, it is good practice to specify the actual size of your images using HTML attributes, you should not use them to resize images.

If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct aspect ratio. You should use an image editor to put your image at the correct size before putting it on your webpage.

If you do need to alter an image's size, you should use CSS instead.