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.
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">
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.
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).
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.
|1170 x 630
|1024 x 551
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.
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.