• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Dev Tips / WordPress Responsive Images Increased Page Size

WordPress Responsive Images Increased Page Size

Last updated on December 29, 2016 by Sal Ferrarello

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.

Default WordPress Media Settings

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

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.

Screen Size Page weight
1800 px 331 kb
400px 666 kb

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.

Image Dimensions File Size
1170 x 630 115 kb
1024 x 551 450 kb

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
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.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Dev Tips Tagged With: WordPress

Reader Interactions

Comments

  1. Ashoksinh says

    December 28, 2016 at 11:14 am

    Thank you for your great article.

    i am new to blog creation and the same problem happens with me.
    I find that when I upload one image which is already reduced by me and WordPress upload many images with 200×150 100×50 etc. and with srcset tag in images this all images are uploaded to website.

    I think this will increase my file size because the same image with different size are loaded to the webpage, which is bed thing for website.

    I also find that many reputed blogging websites have not uses this src set.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in