For any online organization that’s concerned with their website performance (that’s everyone, right?), Google’s PageSpeed Insights tool is a useful guide for improvement. Just enter your website URL, and you’ll get a report about what’s working well and what needs to be fixed.

PageSpeed is great about pointing what might be slowing your page down, but it doesn’t always give you specific guidance about how to fix those things, particularly when it comes to images. PageSpeed might tell you you need to compress them, but it doesn’t give you any indication of what kind of compression is good enough.

To make this a bit easier, we’ve experimented extensively with PageSpeed, and have come up with a set of best practices for optimizing with imgix that will help you improve your score without any noticeable reduction in quality.

How imgix Can Help

There are several broad areas where imgix can improve your PageSpeed score:

• serving the right size and best image format/quality for your customers
• removing unnecessary metadata and compressing images to decrease file size
• automating image optimization for solid results with low technical overhead

Serve Fewer Pixels

Resizing is the most important aspect of improving image delivery—even small decreases in raw pixels have a big influence on file size. For example, serving a 300×300-pixel image to a 100x100 container results in an increase of over 300KB in the file size. Serve your images (especially larger ones) as close to their final resolution as possible to minimize unnecessary bits.

Intelligently Compress Images

Similarly, you can experiment with compression settings to find a good middle ground between image quality and file size. imgix’s default quality setting (q=75 ) is designed to do this for a wide range of images, but knowing the specifics of your own catalog can allow you go much lower with very little loss.

This is true particularly for high-DPR images, which can look quite sharp even at settings as low as q=35. imgix’s auto=compress parameter applies a q=45 setting and some other properties to decrease file size, so using it together with q=35 to override that value or using q=35 alone will give you enough compression (still with good image quality) to pass PageSpeed.

Give Customers the Best Format for Their Context

Finally, serving images in more modern formats such as WebP can give you another speed boost. Google has a helpful decision tree for web image formats, so you can see what’s best for different use cases. However, since the more modern formats aren’t universally supported, it’s best to provide a fallback for customers whose browsers can’t read them.

With imgix, you can either define the format up front, or use the auto=format parameter with a fallback to respond with the best format on the fly, based on your customer's device and browser.

Strip Unnecessary Data

Another way to increase image loading speed is to remove unnecessary metadata from the image. This is especially true for small images like thumbnails, because the limited pixels make the metadata proportionally heavier. With imgix’s cs parameter, you can reduce or remove the color profile data to get as slim as possible. The auto=compress operation does this by default.

Automating Awesome Performance

All of these methods offer a concrete speed boost. The combination that works best depends on your specific image catalog and how your customers access your site. To minimize the complexity, imgix offers an automated way to get quick improvements, ensuring that every image on your site has some level of optimization applied.

We recommend the following patterns for PageSpeed:

• Apply auto=compress,format: These two values for auto , used together, cover the baseline compression and format-switching needs. auto=compress includes cs=strip and sets quality to q=45—if that's not enough for your images to pass, you can override with q=35 as noted above. auto=format delivers modern formats like WebP when the customer’s browser can accept them, and falls back to the value of fm (if defined) or the image’s original format.
• Use imgix.js or one of our open-source libraries to generate a comprehensive srcset that will handle all possible sizes and device-pixel ratios. Allowing the browser to choose the correct image size from a pre-defined list is more efficient than forcing it to scale the image on its own. This method also makes responsive design much easier.
• Tweak as necessary. If the automated settings aren’t quite right for your catalog, you still can apply their individual components in a way that works best for you. For example, if you want the level of compression that auto=compress provides, but color profile information is important for your application, just use q=35 instead.
• Define non-auto parameters that apply across your entire catalog as defaults in your account settings. Like the auto parameters, they give you a basic level of optimization that can be overridden as needed.

Improving page load speed is an art as much as a science, and starting from a solid baseline of image optimization is a great way to improve your PageSpeed score quickly. For more information about PageSpeed’s methods and optimizing with imgix, check out the following resources:

• https://developers.google.com/speed/docs/insights/rules
• https://blog.imgix.com/tag/website-performance.html