Here we wish to illustrate that the img element is an inline element, as we see here ... An orange square ... with this very small (10-pixel by 10-pixel) image. Note how the bottom of the image lines up with the bottom of the line on which it appears, a reflection of the fact that an img element is an inline element.

The orange square image displayed in the previous paragraph is just a 10 pixel by 10 pixel image, but whatever the size of the image is we should tell the browser. In this case, if we do that, the display An orange square looks exactly the same (of course).

On the other hand, if we want the image to be 10 times as wide and 10 times as tall, we can do that too by setting the width and the height and letting the browser scale the image. Here is the result: An orange square This is not a good idea, however. Much better is to use an external program to make the image itself the size we want it to be, and then tell the browser what this size is. That way, the browser has no "scaling" to do, and our page will display that much faster.