The following Scooby image does not specify the width and height attributes. Scooby Flexing Muscles So the browser renders it using its natural dimensions of 50x50 pixels. If you right click on the scoob.png file and choose 'Get Info' or 'Properties' you can see the image's natural dimensions. Or if you drag the image file directly onto a browser, most browsers will display the image's natural dimensions in the browser tab. Obviously, graphic editing software such as Photoshop will give you that information too.

The following Scooby image has been resized to 25x25 pixels, half of its natural size. Scooby Flexing Muscles Notice that both the width and height have been reduced by 1/2. That is nesessary in order to preserve its aspect ratio - the ratio of it's width to height.

The following Scooby image has been resized to 75x25 pixels, which distorts the aspect ratio (like the time Scooby was looking into a circus mirror). Scooby Flexing Muscles When you resize an image, you need to be careful to preserve the aspect ratio so it won't get distorted. Not all images are square (same width and height) like Scooby.

Homer's natural size is 45x50 which is rectangular. Suppose you need homer to render with exactly 25 pixels in width (rather than 45). To preserve the aspect ratio, solve for H in this equation 45/50=25/H and you see that the height (H) necessary to preserve the aspect ratio is 28. Homer D'Oh

It is important to always specify the width and height of an image even if you are not changing its size. That's because of the way the HTTP (Hypertext Transfer Protocol) works. The Web browser first acquires the HTML file from the server and starts reading it. As the browser finds img elements in the HTML code, it makes additional requests to the Web server to acquire the graphics files. If you do not specify the width and height, the browser has to wait for the graphics files to arrive before it can see what their dimensions are and allocate space in the page for them. But if you do specify width and height in the HTML code, the browser knows in advance how much space the graphic will use in the page, so it can continue rendering the page before the graphics files arrive from the server. Thus, pages will render more quickly and efficiently when the width and height are specified in the HTML code.