HTML Images.

Images bring your content to life. Learning how to properly embed and optimize images is a core skill for any frontend developer.

The Essentials

The <img> tag is an 'empty' tag—it has no closing tag.

The 'src' attribute is required and specifies the path to the image.

The 'alt' attribute is required for accessibility and SEO.

The 'width' and 'height' attributes help the browser reserve space for the image.

You can use relative paths for local images or absolute URLs for web images.

Commonly used formats include JPG, PNG, GIF, and modern SVG or WebP.

Professional Insights

Why 'alt' Text is Mandatory

If an image fails to load, the 'alt' text is displayed. More importantly, screen readers read this text to visually impaired users. It is also indexed by Google Images for SEO.

Aspect Ratio and Layout Shift

By providing width and height attributes, the browser can calculate the aspect ratio and reserve space before the image loads. This prevents the page from 'jumping' (Cumulative Layout Shift).

Responsive Images

For production, use the 'srcset' and 'sizes' attributes to serve different image sizes based on the user's screen resolution, saving bandwidth on mobile devices.

The <figure> and <figcaption> Elements

To add a caption to an image, wrap the <img> in a <figure> tag and use <figcaption> for the text. This is the semantically correct way to group an image with its description.

Critical Pitfalls

Leaving out the 'alt' attribute entirely or using a useless value like 'image1'.

Uploading massive 5MB images when only a 200KB thumbnail is needed.

Forgetting to specify width and height, causing layout jumps during page load.

Using the wrong file format (e.g., using a non-transparent JPG when you need a transparent PNG logo).

Interactive Lab

Sprint Tasks

Add an image with src='https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=300'

Add a descriptive alt text: 'Developer coding on a laptop'

Set a fixed width of '300' to prevent layout shift

Loading editor...

Production Preview