HTML Images

• They reduce unexpected layout shifts when images load.
• They help the browser calculate the image's aspect ratio.
• They make layout behavior more predictable.
• They improve the user experience on slower connections.

Preserving Aspect Ratio

An image's aspect ratio is the relationship between its width and height.

For example, an image that is 1200 pixels wide and 800 pixels high has a 3:2 aspect ratio.

<img src="images/landscape.jpg"
     alt="Mountain landscape at sunrise"
     width="1200"
     height="800">

When resizing the image proportionally, preserve this ratio to avoid distortion.

Important Rule

Do not assign unrelated width and height values merely to force an image into a particular shape. If the image's actual aspect ratio differs from the intended display ratio, cropping or another deliberate presentation technique may be more appropriate.

8. Intrinsic Dimensions and Display Dimensions

Intrinsic dimensions are the dimensions associated with the image resource itself. Display dimensions describe how large the image appears on the page.

These dimensions can differ. For example, a 1600 by 1200 image can be displayed at 400 by 300 CSS pixels without changing the original file.

Example

<img src="images/large-photo.jpg"
     alt="A city skyline"
     width="400"
     height="300">

The browser may display the image at 400 by 300 CSS pixels, but the downloaded image may still contain millions of source pixels.

Reducing the displayed size does not necessarily reduce the file size downloaded by the browser. For efficient delivery, choose an appropriately sized image resource.

9. Responsive Image Sizing Basics

Images often need to fit different screen sizes. A common introductory technique is to let the image shrink within its containing element while preserving its proportions.

The following example uses inline CSS to demonstrate the principle. More complete responsive image selection is covered in the dedicated responsive images lesson.

<img src="images/course-banner.jpg"
     alt="HTML Mastery course banner"
     width="1200"
     height="600"
     style="max-width: 100%; height: auto;">

The max-width declaration prevents the displayed image from exceeding its container's available width. The automatic height preserves the aspect ratio.

In production projects, reusable styling should generally be placed in a CSS stylesheet rather than repeated inline.

10. Common Image Formats

Different image formats are suitable for different types of content. Choosing a format affects visual quality, file size, transparency support, animation and browser compatibility.