Responsive Images

Define/Explain src and srcset

The src attribute is giving directions to your image - it tells the browser where to find it or the source. It's the one we've all used:

            <img src="trevor.jpg" alt="A man">
        

If you want to make your images look good on all devices you use srcset. This gives the browser multiple options for the same image in different sizes. Sort-of like how each person needs different shoe sizes.

        <img src="turtle.jpg"
    srcset="turtle-small.jpg 300w,
            turtle-medium.jpg 600w,
            turtle-large.jpg 900w"
    alt="Basking Turtle">
    

Sizes

The sizes attribute gives the browser some information about how big you're planning to show the image. This helps the browser pick the right image size before it loads the page.

        <img src="panda.jpg"
    srcset="panda-small.jpg 300w, panda-medium.jpg 600w, panda-large.jpg 900w"
    sizes="(max-width: 600px) 100vw,
           (max-width: 900px) 50vw,
            33vw"
    alt="A furry Panda">
        
    

This code would tell the browser - "On small screens, use the full width, On medium, use half the width. On large, use a third."

Why Art Direction?

Art direction is about size but more. It's about showing the right part of an image for different screen sizes. At times showing the same image at different sizes might not be enough. For example on a phone you want a close up of a monkey on a branch, but on a desktop you want to show the rest of the jungle as well.

For example you can use the <picture> element as a container that lets you specify different image sources for different scenarios. Inside the picture element you use multiple "source" elements which make up your photo options. And each source can have conditions aobut when it should be used such as -use this version when the creen is wider than 800px.