 According to HTTP Archive, a typical page on mobile weights 1.5 megabytes and about half of that weight is images. That's a great opportunity for optimization. You can make your website faster by setting images size in pixels correctly. In other words, giving them the right width and height when you save them. This page uses a lot of images. Let's take a look at the Lighthouse report. It tells you that if you reduce image dimensions, you can make your page faster by a few seconds. Now that looks like a good idea, so let's get down to it. The best place to start looking is Chrome DevTools Network Panel. Here you can see a list of everything loaded by the page, so let's select Image Filter to focus on images only. The page is loading 11 images and the total weight of the images is 1.3 megabytes. A bunch of them are cover images for the posts on the site. Let's look at the site in device mode. This image here is the headline image for one of the posts. We want it to look good on the screen so it should be as wide as our text column, but it doesn't have to be bigger than that. Right now the loaded image is 1400 by 900 pixels wide, and the browser resizes it to about 370 and 240 respectively. You can see that despite the changes in the websites width, it still loads the same image, 1400 pixels wide. This is much more than we need on most of our users' devices. The size of the image you should use depends on the display size and the user's device. Let's create two versions of this image, a medium one and a small one using graphic software. A rule of thumb you can use is that most images should be below 100 kilobytes and an image should be no bigger than 200 kilobytes times the portion of the screen it takes up. You can use a source set attribute on the image tag to tell the browser what images are available. Here you show that you have a medium JPEG image that is 400 pixels wide and a small JPEG that is 100 pixels wide. If the browser doesn't support source set, it will use the source attribute instead. The browser will do all the heavy lifting for you and calculate which image works best for the size and type of the display. Now let's reload the page. Voila! We just reduced our page weight significantly by optimizing only a single image. You should use source set with all of your images. If you name your images in a consistent way, for example image name dash small or image name dash medium, you can automate it with most of the major frameworks these days. For an average user on a 3G network, the site now loads faster. Faster images lead to better perceived site performance and can positively impact the bounce rate as well as user engagement. Thanks for watching and see you next time. Check out our other videos for more tips on how to make your website even faster.