<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/reset.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<figure>
<picture>
<source media="(width < 450px)" srcset="tim.jpg">
<source media="(width < 550px)" srcset="tim--md.jpg">
<img src="tim--lg.jpg" alt="Tim Berners-Lee at a computer.">
</picture>
<figcaption>Tim Berners-Lee at a computer.</figcaption>
</figure>
</body>
</html>
body, figure { padding: 1rem; }
figure { background-color: gold; }
figcaption {
font-family: sans-serif;
margin-block-start: 1rem;
}