For small viewports, we want to save bandwidth and we may be dealing with slow speeds; so it's very important that images' filesizes are not too big. In this lesson, we are going to cover how to show a different-sized image than the one seen on desktop.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, maximum-scale=1" /> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/marx/2.0.7/marx.min.css"> <link rel="stylesheet" href="style.css"> </head> <body>
<!-- 700w: 700px; 90vw: 90% vieport width -->
<img srcset="https://imgur.com/Nv96rWN.jpg 700w, https://imgur.com/aJOEQVz.jpg 1024w" sizes="(max- 480px) 90vw, (max- 700px) 70vw, 60vw" src="https://imgur.com/aJOEQVz.jpg" alt="Opal lying on her new bed - my laptop case" > </body> </html>