/Users/lenny/ui_patterns/responsive_images

enables browser to download a smaller image for smaller screen size, like mobile

for example, you have a page with a large image 1600x400

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="margin: 0">
    <img style="width: 100vw;" src="https://source.unsplash.com/yWwob8kwOCk" />
    
</body>
</html>

Untitled

this image is only 27.8kb, but

it’s always downloading the 1600x400 image, even though it’s mobile!

which we don’t need for 400 pixel wide screen

Untitled

1. srcset img attribute

Allows you to define multiple different sized images and the browser will then automatically chose the image that best fits the user’s screen size

i.e. the smallest image that can be used without stretching/blurring pixels

Keep src as fallback

<img 
        style="width: 100vw;" 
        src="http://placehold.co/1600x400/png"
        srcset="http://placehold.co/400x100/png 400w,
            http://placehold.co/800x200/png 800w,
            http://placehold.co/1200x300/png 1200w,
            http://placehold.co/1600x400/png 1600w
        "
    />

srcset="url" pixel_size_of_image