Lower resolution images with larger file size than the original

Hi, thank you for reaching out to us!

That is an interesting problem, would you be able to send us the original images from your examples? Then we’ll take a close look at it. You can send them to [email protected].

I have sent you the original images by email just now. Thanks for looking into this.

Thank you! Reposting our reply here for transparency’s sake:

I’ll try to explain a bit using the last image you sent. PNG’s are compressed partially using dictionary-based encoding. This means that if sequences of data that appeared previously are repeated they can simply be referenced instead of having to be stored separately. To illustrate, say we have a text file that contains the following sentence a thousand times:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua”

Instead of storing this entire sentence in the text file a thousand times, when compressed it would simply store the sentence once and then a reference pointing to the one sentence 999 times. This logically saves a lot of space.

Now, when we look at your original image, we can see that it’s a very small image. It consists largely of entirely black areas mixed with entirely grey text (no shadows around them whatsoever). If you look at the image you can see that almost the entire image is a mix of these 2 exact colours.

If we compare this to the slightly resized image, you can see that the text is no longer just 1 colour, nor is the black around it. This is unavoidable when resizing images to be slightly smaller, though let’s not get in to the specifics of how resizing works too much (you can find great guides about that online though).

The effect of this difference is, as you have noticed, pretty big. In the original image the compression algorithm can make lots of references since there are large identical sequences of pure black to be found. In the resized image large amounts of black pixels around the text are no longer actually black, so they all have to be stored separately. This is why the resized image is so much larger.

This file size difference will be most pronounced in images like these, were the original consists of largely repeating sectors. A typical image of a tree will not have many of these sectors so in that case resizing the image to make it smaller will usually result in a smaller file size.

So, to summarise, the problem doesn’t lie with WordPress necessarily, but more with how resizing images can increase file size dramatically, and make them harder to compress. Particularly with images like your examples.

Wow, thank you so much for the in depth explanation! I always learn a lot in your support forum.

I ended up disabling WordPress from generating all those additional images except for a small thumbnail size and then used the Regenerate Thumbnails plugin to clean everything up (also reduced a lot of html bloat on the front end with less srcset paramaters).

I noticed the images still look fine even when the dimensions are larger than the container width of the site. The browser must be doing some rendering to add the extra colors needed?

Indeed, browsers can (and will) also dynamically change the size at which an image is displayed. The reason you typically don’t want to rely on only that is that if you want to display the image in a very small frame it’s wasteful to let users download a large image. Hence all the tools to resize images to the dimensions that you actually use on your site.