HTML Images & SVGs: Performant Visuals

The <img> tag is a 'Void Element', meaning it is self-closing and wraps no internal content. Its core engine relies on the src attribute to declare the precise URL of the asset.

However, a catastrophic performance error is failing to declare the image's dimensions. When an image downloads, it violently pushes text down the screen upon rendering, causing a Cumulative Layout Shift (CLS). Professional developers actively prevent this by providing precise width and height attributes directly on the tag. This allows the browser to instantly reserve the exact layout canvas area before the image file even begins downloading over the network.

Web accessibility is a strict technical requirement. Every single <img> tag must include an alt (Alternative Text) attribute. Screen readers natively parse this description and announce it to visually impaired users, providing them with the visual context they cannot see.

If an image is purely decorative (like a background swirl or a generic dividing line) and conveys absolutely no meaningful information, you must set the attribute to an empty string (alt=""). This explicitly commands the screen reader to silently ignore the node entirely, preventing it from reading out useless filenames like 'divider-line-blue-final.png'.

Serving a massive 4K desktop image to a mobile phone destroys bandwidth and often ruins the visual framing. We solve this via 'Art Direction' using the <picture> wrapper.

The <picture> tag houses multiple <source> elements. By attaching a CSS query directly to the media attribute, you command the browser's engine to dynamically swap out the image file based on the user's screen size. You can also use <source type="image/webp"> to serve highly compressed, next-generation formats to modern browsers, while seamlessly failing back to a standard .jpg for older systems.

Introduction to HTML Media. While text forms the structural backbone of the web, images provide the critical visual context that engages users. Today, we are mastering the technical integration of media. We will explore how to embed images, ensure strict accessibility, prevent catastrophic layout shifts, and utilize advanced elements for responsive art direction.

The Void Element: img. The <img> tag is classified as a 'Void Element', meaning it is self-closing and never wraps internal content. The single most critical attribute is src (source), which strictly defines the precise URL path to your image file.

Source Definition. Which mandatory attribute must be defined on every single <img> tag to tell the browser engine exactly where to download the graphical asset from?

• →href
• →src
• →link
• →file

Mandatory Accessibility: alt Text. Web accessibility is absolutely non-negotiable. Every <img> tag must include an alt (Alternative Text) attribute. Screen readers read this description to visually impaired users, and it renders visibly if the image fundamentally fails to download.

Decorative Images. If an image is purely decorative (like a background swirl) and conveys absolutely no meaningful information, what is the technically correct way to handle its alt attribute for screen readers?

• →Omit it entirely
• →Empty string (alt="")
• →Text "none"

Preventing Cumulative Layout Shift. Cumulative Layout Shift (CLS) occurs when a downloading image brutally pushes text down the screen upon rendering. Professional developers actively prevent this by providing precise width and height attributes directly on the tag, allowing the browser to safely reserve the exact canvas area instantly.

Space Reservation. Which two attributes must be explicitly defined on an image element to reserve its layout space natively, perfectly eliminating Cumulative Layout Shift (CLS) before CSS styling applies?

• →x and y
• →size
• →width and height
• →columns and rows

Responsive Art Direction with Picture. Sometimes, scaling down a desktop image makes the subject too small. We utilize 'Art Direction' via the <picture> element. It wraps an <img> tag and utilizes multiple <source> tags. By writing CSS media queries inside the media attribute, the browser dynamically swaps the file.

Art Direction Query. Inside a <picture> element, which specific attribute on a nested <source> tag allows you to write a CSS query that tells the browser exactly when to load that specific asset variant?

• →query
• →media
• →screen
• →condition

Modern Formats: WebP and AVIF. Modern engineering offers formats like WebP and AVIF. They achieve vastly superior compression algorithms, providing smaller file sizes without noticeable visual degradation. Using <picture>, you serve these next-generation formats while automatically maintaining a .jpg fallback.

Introduction to Scalable Vectors (SVG). While JPGs are raster grids of fixed pixels, SVGs (Scalable Vector Graphics) are XML math. Because they are driven by mathematical formulas, SVGs scale infinitely without pixelation. Crucially, as raw code, you can inject them directly into HTML and modify colors dynamically via CSS.

Infinite Scalability. Which image format is structurally based on pure XML mathematical code rather than a grid of fixed pixels, allowing it to scale infinitely without ever losing crisp visual quality?

• →JPEG
• →PNG
• →SVG
• →GIF

Media Integration Mastered. Outstanding work! You mastered the architectural standards for integrating media. You understand strict accessibility with alt text, layout preservation with dimensions, art direction with <picture>, and next-gen formats like SVG. Next, we build Forms.

Prevent Layout Shift With Image Dimensions. Setting width and height lets the browser reserve space before the image loads.