Responsive images that do not blow the bandwidth budget

Html

srcset lets the browser pick; sizes tells it how wide the image will actually be rendered.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 700px) 100vw, 700px"
  width="800" height="600"
  loading="lazy" decoding="async"
  alt="A harbour at low tide" />

Download

Web & CSS images performance responsive chris

More in Web & CSS

Responsive grid without media queries Web & CSS auto-fill with minmax reflows on its own, so the column count follows the container rather than a breakpoint list. Truncate text to a number of lines Web & CSS Ellipsis after two lines. The -webkit- prefixes are still required despite being supported everywhere. Visually hidden, still read aloud Web & CSS Hides a label from sight while leaving it in the accessibility tree. display:none would remove it from both. Centre a box, two ways Web & CSS Grid is one line. Flex is three and gives you control over the axes separately. Respect a reduced-motion preference Web & CSS One rule that disables animation for people who asked their system for less of it. A semantic, accessible form field Web & CSS The label is tied to the input by id, and the hint is announced with it via aria-describedby.

Random picks

Which indexes is nobody using? Databases Lists indexes that have never been scanned, which are pure write cost. Check against a long uptime before dropping any. Merge dictionaries Python The | operator returns a new dict; |= updates in place. Later keys win in both. Remove every stopped container and dangling image Containers Reclaims disk after a week of building. The volume flag is separate because it is the one that loses data. Find slow queries in Postgres Databases Ranks statements by total time spent. Needs the pg_stat_statements extension enabled. Generate an SSH key and add it to the agent Security Ed25519 rather than RSA: shorter, faster, and no key-size decision to get wrong. Deep clone a value JavaScript structuredClone handles Dates, Maps, Sets and cycles, which JSON round-tripping quietly destroys. Call a JSON API from PowerShell Networking Invoke-RestMethod parses the response for you, so no ConvertFrom-Json step is needed. Context with a timeout in Go Systems Cancels the request and everything downstream of it after two seconds. The defer is not optional.