WordPress Responsive Images Increased Page Size

Let me establish right away, I think WordPress Responsive Images are a good thing and I am an edge case. Unfortunately, in my case the page size has increased rather than decreased with responsive images.

Background

As part of my Friday night fun I’d planned to review the positive impact of responsive images on my website and see if I could improve them further by adding additional screen sizes.

I’m running my base Bootstrap Genesis theme on this site, which includes only one image size by default (1170 x 630). This is the size of a header image on a full width page.

In addition to that theme base image size, I have my WordPress image sizes at their default values. This adds the additional image sizes 150 x 150, 300 x 300, and 1024 x 1024.

How Responsive Images Work

In addition to the traditional src attribute on the image tag, which defines the image to load. An additional attribute, srcset, is added which lists other URLs to load at other screen sizes. Based on how wide your viewport is, the browser chooses to load the appropriately sized image.

For a more thorough explanation, check out Responsive Images with srcset.

Responsive Image Example

If I upload an image that is 2000 x 2000 called square.jpg, a simplified version of the markup generated is:

<img src="square.jpg" srcset="square-150x150.jpg 150w, square-300x300.jpg 300w, square-1024x1024 1024w" alt="square">

The Problem

Since we’re loading smaller images our expectation is the file sizes would be smaller as well. Unfortunately, in the case of this blog the resized smaller pixel size images are actually larger in file size.

Small Screen on Left, Large Screen on Right

The left shows the website loading at a small screen size (and loading 2.8MB of images), while the right shows the website loading on a large screen (and loading 1.1MB of images).

This is exactly the opposite of what we’d expect (and the desired behavior of loading less on narrower screens).

Example

My post Install WordPress with Composer suffers from this issue.

As you can see above the amount of information transferred is greater on a smaller screen (666 kb on a small screen, 331 kb on a large screen), which is due to browser loading the smaller dimension image that is larger in file size.

The Root Cause

Before I upload my images, I compress the file size using tinypng.com, which does a great job compressing images (especially pngs). When WordPress resizes an image it does not compress as efficiently (though there are third-party plugins you can run to improve the compression). The result is the original larger pixel image is a smaller file size than the smaller pixel image.

Update:

Initially, I disabled the srcset attribute on PNG featured images but now I’m running the TinyPNG Image Compression plugin on my site, so the same optimization is being applied to all of my image sizes. This resolves the issue of the WordPress resized images being larger file sizes than my original.

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.