Flexible images and media are the second pillar of responsive web design. A fluid grid will happily shrink and stretch, but a fixed-width image dropped into that grid will overflow its container, trigger horizontal scrolling, or force the layout to break. The classic fix is deceptively simple — a CSS rule such as img { max-width: 100%; height: auto; } — but modern responsive media goes further, letting the browser choose among several image files based on screen width and pixel density, and letting you swap in a differently cropped image for narrow screens.
In this topic you will work through the max-width technique, the srcset and sizes attributes on the img element, the picture element with source and media for art direction, techniques for keeping embedded video and iframes fluid, and the CSS background-size property (cover, contain, and percentage values) for responsive background images. Running underneath all of it is a performance question: mobile users on slow connections should not download a 2000-pixel-wide hero image to display it at 400 pixels.
As you watch, pay attention to three things. First, the difference between resolution switching (same picture, different file sizes — srcset and sizes) and art direction (different crops or compositions — the picture element). Second, how the sizes attribute tells the browser how wide the image will be laid out, since the browser must decide which file to download before the CSS is fully applied. Third, note the actual markup and CSS syntax so you can reproduce it, not just recognize it.
Una Kravets of the Chrome Developer Relations team walks through responsive image techniques in the browser, covering both resolution switching and art direction. Based on the title and series description, expect coverage of srcset for serving appropriately sized files and the picture element for changing the image itself at different breakpoints, demonstrated live in browser developer tools.
It comes directly from Chrome for Developers, so the guidance reflects how browsers actually implement these features, and it is the one video here that explicitly addresses the art-direction subtopic alongside srcset.
A short, focused tutorial from LinkedIn Learning on writing image markup that adapts to the size of the screen. It is likely to start from the foundational idea of images that scale to fit their container and then introduce the responsive image attributes that let you supply multiple sources.
At six minutes it is a compact, well-produced introduction that is a good first watch before the more technical videos, and it connects the max-width scaling idea to responsive markup.
Austin Shelby focuses specifically on the img element's srcset and sizes attributes, showing how to supply multiple image files and let the browser load only the most appropriate one for the current viewport. The framing is explicitly about optimization — avoiding oversized downloads on small screens.
This is the most detailed treatment of srcset and sizes among the three, and its performance angle directly supports the performance considerations subtopic.
Together these videos target MO3 most directly: the LinkedIn Learning tutorial establishes images that scale within a fluid container, Austin Shelby's video drills into srcset and sizes for resolution switching, and the Chrome for Developers episode adds the picture element and art direction. Because all three repeatedly tie image behavior to viewport width and breakpoints, they also reinforce the flexible-images pillar described in MO1 and show how media behaves inside the fluid layouts you build for MO2. The performance framing in the srcset videos — downloading only the bytes a device needs — feeds directly into the mobile-first thinking and trade-off analysis called for in MO4 and MO5. Supplement the videos with the module readings for background-size and fluid video embeds, which the videos may not cover in depth.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.