There are two main reasons that image files end up being too big: Either the image is at a higher resolution than you’re using it or it’s using a compression algorithm that’s not optimal for that particular image. Consider the profile photos on Facebook for example. 99% of the time people are going to see them as tiny little circles, and if they check out your profile perhaps it’ll be 150-200 pixels wide and tall. Upload it at 3000 x 2500 pixel resolution from your phone and you can see that you’re using a billboard size image to create a postage stamp. Highly inefficient and it will slow people down.
In the case of sites like Facebook, actually, the system will automatically shrink your image down to the necessary sizes, but they’re rare in this ability; most sites and just about all blogs just use the huge image and force it into a smaller container, effectively squishing that billboard into a postage stamp in the user’s Web browser. In other words, the entire “billboard” photo is still downloaded each time someone requests that image, regardless of what size it’s actually displayed.
Still, one of the fastest ways to speed up your own Web site is to resize your images to match the rendering size on the page. Have a blog – like this one! – where you’re including an image at 700×400? Then there’s no reason to upload a 1500×900 image and slow everything down.
The even more common problem that slows down page loading, however, is that most photos and other images aren’t optimized by format, so your photo might be 250Kb as a PNG but an image file that is identical to the human eye might be 58Kb as a JPG. If that’s the case, why wouldn’t you want to shrink everything down to make your content upload and download as quickly as possible?
All of that is where Google’s new Squoosh comes into play. But let’s just demo it and you’ll see what I mean!
Here’s what you want to bookmark: squoosh.app and here’s what you’ll see when you get there:
As it suggests, all you need to do is drag and drop a photo or other image file directly from your computer into the Web browser’s window. I’ll do so with a photo of my son that I used on a blog post over on my GoFatherhood site:
The most striking element on the page is the vertical blue bar in the middle of the photo. That lets you compare versions of an image and it’s terrific! On the left side is the original as you can see on the lower left. It’s 259 kB. On the right is the same image re-compressed with MozJPEG as the image algorithm, saving a remarkable 68% and shrinking the same image, same size, down to 83.7 kB.
To look just a bit more closely at each, let’s start with the left side:
Worth noting is the light blue download icon. Doesn’t really make sense to download the original image since, well, you already have it on your computer, but once you start fiddling with options, grabbing the reduced image does make plenty of sense. Otherwise, this particular pane is really just a reference, though you can try a competing compression algorithm here if you really wanted by clicking on the “Original image” menu. But we’ll get to that in a second!
In the center of the window is your image with the comparison slider:
You can zoom in or out as desired, and the “toggle background” affects the background of the window, not of your photo! In the above, notice that the right side of the image, reduced 68%, is crisp and warm in color, with no visible degradation of the image. Seems like that’s a win!
All the real action, however, is on the right side of the window:
Notice that it’s easy to resize your image, always a good idea and particularly so if your image comes straight out of a smartphone camera: Those images are HUGE! You can also reduce the color palette, which helps reduce image size in some situations, though not all. That’s probably the least useful of the options for photographs, but if you’re working with simple line art or similar, it’s surprising how few colors might actually be used in a pie chart or similar.
The real fun is the Compress, however. Notice that the current 68% smaller image is in “MozJPEG” mode. There’s a quality slider that you can experiment with: lower quality = smaller image, but the image definitely degrades if you go too far. Here’s an example of how that might look:
If you were making a postage stamp, maybe the lower resolution (which has made the image 94% smaller!!) could work, but for most any use, 10% quality is clearly way, way too low. No worries, slide it back up and you’re good.
There are a variety of different compression options you can try too, though Squoosh seems pretty good at guessing a good one as the default:
Pay attention to that output size data, however, because some image formats end up creating an image that’s bigger than your original instead of smaller!
Choosing “Browser PNG” has made the image an alarming 377% bigger than the original! Definitely not a good choice.
So that’s Squoosh. Try different compression levels, resize your massive images to be closer to the expected size you want to use (for example, if you’re emailing it to someone, 700 px wide would be plenty and I share images on social media at 1000 px wide, a significant reduction from the 3000+ pixel wide images that come off my iPhone XS). Smaller images directly helps create a faster online experience, which is good for everyone.
Definitely check out Squoosh. It’s quite a nice little tool!
The post Shrink Image File Size with Google Squoosh! originally appeared on Ask Dave Taylor.