Responsive images
Introduction
Why use srcset and sizes?
Let’s start at the beginning. Why even use srcset and sizes? There are two two real advantages:
Delivering images that are better suited for the user's device.
Improving the website's loading time.
With srcset and sizes it is possible to offer multiple sizes of the same image. The browser does the calculation and chooses the best size to display to the user. Browser support of srcset and sizes is excellent and the fallback is perfect.
The browser does the calculation and chooses the best size to display to the user.
The browser not only takes into account the width of the screen (viewport width), but also the pixel density. Whether a user is viewing your website on a desktop screen with low resolution or a tablet screen with high resolution, the browser chooses the best size. Because you can offer multiple sizes of the same image, you can improve the loading time of your site. It’s no longer needed to serve that big hero image on a small screen. With srcset and sizes you can offer a smaller size which will be used by the browser. This results in a faster website.
Deep Dive into srcset
Let's start by taking a closer look at how srcset is used in the browser.
Out of the box, Strata will automatically generate and populate the srcset attribute for you.
Example
{!! $this->get('image')->first() !!}<img
src="https://res.cloudinary.com/helixsleep/image/upload/v1/samples/imagecon-group?_a=AAAGSAI"
srcset="
https://res.cloudinary.com/helixsleep/image/upload/c_scale,w_2800/v1/samples/imagecon-group?_a=AAAGSAI 2800w,
https://res.cloudinary.com/helixsleep/image/upload/c_scale,w_2168/v1/samples/imagecon-group?_a=AAAGSAI 2168w,
https://res.cloudinary.com/helixsleep/image/upload/c_scale,w_1680/v1/samples/imagecon-group?_a=AAAGSAI 1680w,
https://res.cloudinary.com/helixsleep/image/upload/c_scale,w_1301/v1/samples/imagecon-group?_a=AAAGSAI 1301w,
https://res.cloudinary.com/helixsleep/image/upload/c_scale,w_1007/v1/samples/imagecon-group?_a=AAAGSAI 1007w,
https://res.cloudinary.com/helixsleep/image/upload/c_scale,w_780/v1/samples/imagecon-group?_a=AAAGSAI 780w,
https://res.cloudinary.com/helixsleep/image/upload/c_scale,w_604/v1/samples/imagecon-group?_a=AAAGSAI 604w,
https://res.cloudinary.com/helixsleep/image/upload/c_scale,w_468/v1/samples/imagecon-group?_a=AAAGSAI 468w,
https://res.cloudinary.com/helixsleep/image/upload/c_scale,w_362/v1/samples/imagecon-group?_a=AAAGSAI 362w,
https://res.cloudinary.com/helixsleep/image/upload/c_scale,w_281/v1/samples/imagecon-group?_a=AAAGSAI 281w
"
>Formatted for better readability.
\
Based solely on the provided srcset, the browser will pick the src which matches the viewport width. This is great if your image streaches all the way from the left edge of the screen to the right edge. Like in this video:
\
But in a more realistic scenario, your image would likely be more contained on the page, but the browser still doesn't know anything about how wide we want our image. In this example we have the image inside of a div container with a max width set. So you'll see as we resize the browser again, that bigger and bigger images are loaded, eventhough the rendered image doesn't get any bigger than our defined max width. This is obviously a waste of bandwidth.
\
To solve for this we can tell the browser which image we want it to use based on the viewport size. This is where the sizes attribute comes in to play. So let's take a look at how we can use this. Take this example
This means that if the viewport is a minimum of 768px wide it will look in our srcset to find the entry that is still bigger or equal to the size we asked for. In this case it would be
as we told the browser to give up something for 768px and 780w covers that.
We can even define multiple sizes for various breakpoints.
The order of the
sizesseems to be important. Has to be in descending order; largest to smallest.
Was this helpful?