Specifying Image Size

Sometimes when you load a Web page, you see the text first, and then when the images load a few moments later, the text jumps around to accommodate them. This happens because the size of the image is not specified in the HTML.

When a browser gets to the HTML code for an image, it must load the image to see how big it is and how much space must be reserved for it. If you specify the image’s dimensions, the browser will reserve the space and can fill in the text around the image as the image loads, so that your layout will remain stable as your page loads.

You can use either your browser or your image editing program to get the exact dimensions of your image.

Browsers will also stretch or shrink an image to fit the size you’ve ...

Get HTML5 and CSS3: Visual QuickStart Guide, Seventh Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.