How do I optimize my background image?

Page Speed Insights said I can reduce the size of my background image by 25.2KiB (13% reduction). But I didn’t understand how to do that. That was after I already ran it through Kraken to optimize it. I choose the lossy option which I think reduces it the most. So how do I reduce it by 13% more if Kraken can’t do it?

There’s a ton of ways to compress images, perhaps Google is using a different technique and thinks more can be done. My favorite for quick tasks like this is - drag and drop and you’re done.

You can try a few others, just search around - but don’t drive yourself crazy trying to match exactly what Google says.

Try or

I like RIOT optimizer as it handles png, jpg, and gifs quite well. For images with a lot of transparency, I found that PNGoo works well also.

Be aware that PageSpeed isn’t just looking at the image optimization. It’s also looking at the resolution in pixels. You could run the image through every optimizer on the planet with the highest levels of compression. If PageSpeed thinks the image is larger in pixels than it needs to be, it will ding your score.

Something else to look into is using WebP format for images. No matter how much I compress my PNGs, using multiple programs, dithering them, removing all extraneous colors, etc, WebP comes out in similar or better quality and typically about 8-10% smaller.

I only use these tools to optimize my images and they come out lossless and I don’t get any messages about them needing to be smaller from PageSpeed or Yslow.

Webp simply doesn’t have enough browser support yet, so I don’t use it.