In this video you will learn how to optimize your website by only loading the most optimal image size depending on the viewport width. We will be going over three different examples step-by-step.
We are going to be using the srcset and sizes img attributes. Using these we can tell the browser of all the possible sizes of our image. In addition to that, we can tell in which viewport sizes should each image be loaded.
Using responsive images helps you get a faster website and better user experience.
At the end of this tutorial, you will have the necessary skills to implement responsive images on any website and layout.
00:00 - Introduction
00:45 - Full width image
02:17 - Container image
06:30 - Two column image
09:30 - Conclusion