 You can make your website faster and less data hungry by using the right file format for images. What's wrong with this web page? You know, it loads quickly on 100 megabit broadband, but let's try it on 3G. Now, this is the kind of experience most of your users will get, and that's not so good. Let's see what's going on. Now, one really easy way to find website problems is to look for heavy files in the Chrome DevTools Network panel. Just rearrange to sort by size. In this case, you can see some heavy images right at the top. A simple rule is to look out for any images over about 100 kilobytes in size. That is often a sign of trouble. Let's see what's gone wrong. Aha, these photos have been saved in the PNG format. Now, photos should always be saved using a format like JPEG that's designed for the purpose. The WebP format can often work even better than JPEG. To find out more, check out our links in the description after this video. Let's download the PNGs and try saving them as JPEGs. There are lots of ways to convert files, but for now, I'm just going to use Preview on Mac. Let's compare the size of the image files, the PNGs and the JPEGs. Wow, that's a big difference about a quarter of the size just by saving as JPEGs. The JPEGs look just fine too, even better if you save them from the originals. Let's replace the images for the website in the images directory, update the HTML to use JPEGs instead of PNGs, and you're done. Now, let's take a look at the logo at the top of the page. Yep, looks like the company logo is a PNG as well. Now, there's nothing wrong with that, but if you can use an SVG instead, that will be much smaller. The SVG format describes the lines, shapes and colors that make up an image rather than the individual pixels. That means that SVGs are naturally responsive, they can resize to fit. What about the social media logos? That turns out that these were done using a logo font. Again, there's nothing wrong with that, but if you only use a few logos, you're better off with SVGs. SVG logos are available for all the social media brands, and SVG is really well supported. You can even include SVGs inline in your HTML file. They don't need much code, and that can speed up loading by reducing the number of things your site needs to load. Now, let's upload our changes and open the site again. In this example, I'm adding my SVG files with Git, then committing and pushing them to the repo to update the site. That's a big improvement. Now, what about page load speed? That's what really matters. Compare the old version and the new version. You can see the new version is much faster, so that's a really easy way to make your website work better. Use a web-optimized format, such as JPEG or WebP for photos, and use SVG for icons and logos.