Codeskill

Learn to code, step by step

Responsive Images

Making your HTML adaptive

Responsive images scale and swap to suit the device viewing them. On a phone you want something small and fast; on a desktop monitor you can afford a larger file. The HTML and CSS techniques that make that happen.

Why responsive images matter

Responsive web design adapts layout to screen size and orientation. With images, that means:

  • Faster load times: smaller images on smaller screens.
  • Less bandwidth: important for mobile users on limited data plans.
  • Better appearance: images stay sharp without overflowing their container.

Techniques for responsive images

1. Using CSS

The simplest approach: cap the image width at 100% of its container and let the height scale automatically.

CSS example
img {
    max-width: 100%;
    height: auto;
}

This makes every <img> on the page scale down to fit its container without stretching beyond its natural size.

2. The <picture> element

HTML5’s <picture> element lets you offer different image files for different screen widths using <source> elements.

Picture element example
<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 450px)" srcset="medium.jpg">
    <img src="small.jpg" alt="An example image">
</picture>

On screens wider than 800px the browser uses large.jpg; above 450px it uses medium.jpg; otherwise it falls back to small.jpg.

3. The srcset attribute

The srcset attribute on <img> gives the browser a list of image sources at different widths. It picks the best match for the viewport and screen density.

Srcset example
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" src="medium.jpg" alt="A responsive image">

The browser chooses from small.jpg, medium.jpg, or large.jpg based on screen width and pixel density.

4. The sizes attribute

Used with srcset, sizes tells the browser how wide the image will be at different viewport breakpoints – so it can pick the right file.

Sizes attribute example
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px" src="medium.jpg" alt="A responsive image">

Here, sizes sets the display width at each breakpoint, which helps the browser select the most appropriate source file.

Tips for optimising responsive images

  • Choose the right format: JPEG for photos, PNG for transparency, SVG for logos and icons.
  • Compress images: run files through a compression tool before uploading.
  • Test on real devices: check how images look on a phone, tablet, and desktop.

Accessibility and SEO

  • Alt text: always include descriptive alt text. It matters for screen readers and search engines.
  • Filenames: descriptive filenames and the right format help search engines understand your images.

Newer formats

WebP and AVIF offer better compression than JPEG and PNG in many cases. Browser support is good enough now that they’re worth considering for new projects, especially alongside a fallback for older browsers.

Responsive images aren’t optional anymore if you care about mobile performance. Start with the CSS one-liner, then add srcset or <picture> when you need finer control over which file loads.

PreviousHTML Entities