If you're looking to speed up your site, and are seeing the "properly size images" message in Google PageSpeed Insights, then this article will explain what that means, and how exactly you can fix it. Oversized images on your page will trigger this warning.
What exactly does this mean? Google has determined your image dimensions are larger than necessary in their dimensions, meaning the file size is also bigger than necessary. Of course, forcing users to load in larger files will slow your page load down.
In order to serve images at the correct dimensions, you'll have to find out the rendered image dimensions.
The easiest way to find how large images are rendering in your browser is to right click them, and inspect them. Your browser's developer tools will appear, and will show you exactly how many pixels in width and height the image size is.
Take note of these dimensions, and resize the image file to match to actual image size on page. To learn how exactly to resize and optimize images, see our article about image optimization to learn more, including lazy loading images.
You'll want to use a tool like Squoosh to resize and compress images. Simply upload your original image, and enter the dimensions you found, and download the optimized image. This tool, and others like it, will resize and efficiently encode images to keep their file size down. You can select the image quality and preview the results.
It's also acceptable to resize some image to twice their rendered dimensions. For example, you can resize a logo that renders at 300px x 100px to 600px x 200px. On high-DPI screens, such as the ones in iPhones, Macbooks, and other high end devices, your images will appear more clear with the extra pixels. This can be noticable on some images like icons and logos.
PageSpeed Insights will report an image URL for each image that needs attention. However, it doesn't always catch everything, so we recommend you manually check each image on your pages when optimizing images. The PageSpeed Insights audit will fail only when you can save at least 4KB by resizing the image, so it gives a small threshold where your images may be slightly unoptimized.
Some images on your site may be responsive, meaning they change in size depending on the width of the browser window. This means they'll be much narrower on mobile devices like smartphones and tablets than on desktop or laptop computers.
If you've resized your images based on their rendered dimensions, you may still be setting the "properly size images" PageSpeed Insights error under the mobile results. You don't want to resize the images smaller for mobile devices, because then they'll look blurry on larger screens. Luckily, there's a solution for this.
The HTML spec includes a feature for img tags to handle this. You can add extra attributes to your img tags, telling the browser to fetch a different version of the same image based on screen width.
For a quick example of how this works, see this code:
<img src="hero-image.jpg" srcset="hero-image.jpg 1800w, hero-image-300x225.jpg 300w, hero-image-768x576.jpg 768w" sizes="(max-width: 1800px) 100vw, 1800px">
This code defines three different width images, 1800px, 768px, 300px, in the srcset tag. The browser will select which image to load depending on the width of the window or screen. The sizes tag tells the browser how wide the viewport is to help it decide which image to load. You can learn all about this from Mozilla for a more thorough explanation.
If you're using WordPress, Webflow, or some other content management systems, then this is taken care of for you. The CMS will automatically generate smaller image variations and insert the srcset and sizes attributes into your image tags, so the browser loads smaller images on smaller screens. Just make sure your theme handles this correctly, or you've set it up correctly if using a page builder. This is particularly important for featured images.
Still seeing warnings in PageSpeed Insights about your images? Here are some other common page speed issues relating to images.
This message means that you need to enable image lazy loading. Using this technique, your images will only load as the user scrolls down the page, not all at once.
If you're seeing this message, you need to serve images as WebP to fix it. If you purchase a pro plan from Cloudflare, you can have your images automatically converted and served as WebP. There's also a free WordPress plugin called WebP Converter for Media that will do this. On some platforms, such as Webflow, WebP is not supported.
For all images on your page, you should set explicit dimensions based on how large the image actually displays. You can inspect images in your browser to find their rendered dimensions, and then set the image's width and height to match.