Want to know how to Serve Scaled Images and Optimize Your Images? We’ll show you how! As a conclusion to our What Does Optimizing Images Mean? post, we’ll show you how to actually solve your image optimization woes. This walkthrough is general enough to apply to most websites and platforms.
NOTE: This is just one way to scale and compress your images. There are many other methods that would work just as well.
Here’s how to get your images scaled and compressed:
Step 1) Analyze your site with GTmetrix
When the report is complete, look at your PageSpeed tab and click on “Serve scaled images”
The section will expand and show you a list of images that need to be scaled.
In this example, we’re serving an image that’s 2000×1095, but being scaled to 524×287. We can reduce the filesize significantly if we serve a more appropriately sized image.
Take note of the image name, and find where it’s being displayed on your site.
Step 2) Find out the maximum display size of the image
In other words, determine how large that image could potentially get.
Most likely, your site is responsive. You’ll need to figure out what size the image