Responsive Images & Video

Responsive Images and Video: Complete Guide

Focus keyword: responsive images. Images and video are usually the heaviest part of a page. A phone on a mobile network should not download a 2400px wide photo that is shown in a 360px wide space. In this lesson you will learn how to make media flexible, how to let the browser choose the best file with srcset and sizes, how to crop differently for each screen with the picture element, how to load images without hurting performance, and how to embed responsive video.

Trending keywords covered in this lesson

responsive images srcset sizes, picture element art direction, AVIF vs WebP, image format fallback, lazy loading images, fetchpriority high, LCP image optimization, decoding async, width and height attributes, prevent layout shift, image-set CSS, responsive background image, responsive video embed, aspect-ratio iframe, video poster, playsinline autoplay muted, prefers-reduced-data, image CDN, Core Web Vitals.

1. Start with Flexible Images

A responsive image never overflows its container. Add this to your reset: img, video { max-width: 100%; height: auto; display: block; }. Also write the real width and height attributes in the HTML. The browser uses them to compute an aspect ratio before the file loads, which reserves space and prevents layout shift. With height: auto in CSS the image still scales correctly.

2. The Problem: Resolution Switching

A flexible image still downloads one file. A desktop layout may need 1200px, a phone may need 400px, and a high density phone may need 800px for the same 400 CSS pixels. The srcset and sizes attributes let the browser choose the smallest file that looks sharp.

3. srcset with Width Descriptors and sizes

Example: <img src='photo-800.jpg' srcset='photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w' sizes='(min-width: 900px) 600px, 100vw' width='800' height='500' alt='...'>.

• Each candidate has a w descriptor: the real pixel width of that file.
• sizes tells the browser how wide the image will be displayed in CSS pixels, evaluated from left to right, with the last value as default. The browser needs this because it chooses the file before the CSS is loaded.
• The browser multiplies the displayed width by the device pixel ratio and picks the closest file. It may also consider the network and cache, so you cannot force one file.
• src is the fallback for browsers without srcset support.
• If you leave out sizes, the browser assumes 100vw and may download a file that is too large.

4. srcset with Density Descriptors

For images with a fixed CSS size, such as a logo or an avatar, use density descriptors: srcset='logo.png 1x, logo@2x.png 2x, logo@3x.png 3x'. Do not mix w and x descriptors in one srcset.

5. The picture Element: Art Direction

When the crop must change, not only the size, use picture. A wide landscape photo may need a square crop on a phone so the subject stays visible. The browser uses the first source whose media condition matches, and falls back to the img element inside. The img is required, and it carries the alt text and the size attributes.

<picture>
  <source media='(min-width: 800px)' srcset='hero-wide.jpg'>
  <img src='hero-square.jpg' alt='...' width='600' height='600'>
</picture>

6. Modern Formats with a Fallback

Use the type attribute to offer smaller formats: AVIF first, WebP second and JPEG as the final fallback. The browser skips formats it cannot decode. AVIF and WebP often reduce file size a lot compared with JPEG at similar quality. Use SVG for logos and icons, because it scales without loss, and use PNG only when you need lossless transparency that WebP or AVIF cannot provide.

7. Loading Strategy and Performance

• loading='lazy': delays images that are far below the viewport. Do not use it on the main image at the top of the page.
• fetchpriority='high': tells the browser that the hero image is important. It helps the Largest Contentful Paint score.
• decoding='async': lets the browser decode the image without blocking rendering.
• Compress images and strip metadata. Serve them from a CDN or an image service that can resize on demand.
• Keep the intrinsic image size close to the largest display size multiplied by two, because larger files rarely look better.

8. Responsive Background Images in CSS

For decorative images, use background-image with media queries to switch files, and image-set() for density: background-image: image-set(url(bg.jpg) 1x, url(bg@2x.jpg) 2x);. A CSS background is not part of the content, so it has no alt text and is not announced by screen readers. Use an img or picture when the image carries meaning. Combine it with background-size: cover and background-position to choose a focal point.

9. Responsive Video

• Make video flexible with video { max-width: 100%; height: auto; } or force a shape with aspect-ratio: 16 / 9; width: 100%; object-fit: cover.
• Use poster so the user sees an image before playback, and preload='metadata' to avoid downloading the whole file.
• Offer several formats with source elements, such as WebM and MP4, and add a text fallback inside the element.
• For autoplay background videos use muted, loop and playsinline, and respect prefers-reduced-motion by not autoplaying.
• Add captions with track kind='captions' for accessibility.

10. Responsive Embeds (iframe)

YouTube and map embeds come with fixed width and height. Override them with iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }. Use loading='lazy' on iframes below the fold. Consider a click-to-load preview image for heavy third party embeds.

11. Accessibility Checklist

• Every informative image needs meaningful alt text. Decorative images use alt=''.
• Use figure and figcaption when the caption matters.
• Do not put essential text inside images. If you must, repeat it as real text.
• Provide captions and transcripts for video.
• Check that cropped images still show their subject at every size.

12. Common Mistakes

• Forgetting width and height attributes and causing layout shift.
• Writing srcset without sizes and getting oversized downloads.
• Using lazy loading on the main hero image.
• Hiding images with display none and expecting the download to stop.
• Using picture when a simple srcset is enough. Use picture only for art direction or format choice.
• Mixing w and x descriptors in the same srcset.
• Using a CSS background image for meaningful content.
• Leaving an iframe at a fixed pixel width.

Key Takeaways

Make every image flexible with max-width and intrinsic size attributes, use srcset with sizes so the browser chooses the right file, use picture for art direction and modern formats, lazy load only below the fold, prioritize the hero image, and keep video and embeds inside an aspect-ratio box.