How to stop WordPress spoiling your images and photos

Ross Hall

May 19, 2021
(Updated on June 28, 2021)

You upload your latest photo to WordPress and click “preview”. But what’s this? The image looks blurry and the text on your watermark is horrible and pixilated. This isn’t what you wanted.

Welcome to WordPress image hell.

When you upload your image, WordPress creates several versions of it. Each version has its dimensions changed to scale it for a different device a user might use. Within the code of your page, WordPress presents these as “options” so a web browser can decide which version to download. It’s supposed to make your website more responsive to user needs, but it also compromises your design and arguably their experience.

https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image.jpg
https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image-150x150.jpg 
https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image-300x450.jpg 
https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image-683x1024.jpg
https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image-768x1152.jpg
https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image-1024x1536.jpg
https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image-1366x2049.jpg

Above: Uploading a single image can add an additional 6 files, depending on the original size and settings.

JPEGs are bad, PNG worse

All of this is bad enough, but things get worse when it comes to non-JPG files. Some of my images are uploaded as PNG files as the format is better for illustrations and supports transparent backgrounds. I’ve found instances where WordPress has decided to create the scaled versions as JPEG files. As well as ruining the image quality, some of the smaller images have substantially larger file sizes. The worst example I found was a 120kb 1800×1200 pixel PNG image rescaled to a 1024×635 JPG, weighing in at over 400kb.

WordPress: it’s not Photoshop

WordPress is not an image editing app, and when it scales your images, it affects the quality of what’s available. It can leave charts with pixilated text, while once sharp images end up looking blurry and out of focus. For general images spread through a blog this might not be a problem. The same can’t be said for product or technical photography.

You have little control over which version of the image is being presented. WordPress uses “Srcset” to tell a visitor’s web browser which image files are available. It then downloads and uses the one best suited to their device. After perfecting the image you uploaded, what the visitor sees could have gone through the WordPress mangle.

<figure class="wp-block-image size-full">
    <img loading="lazy" width="1200" height="1800" src="https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image.jpg" alt="A random image." class="wp-image-4073" 
    srcset="https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image.jpg 1200w, 
    https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image-300x450.jpg 300w, 
    https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image-683x1024.jpg 683w, 
    https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image-768x1152.jpg 768w, 
    https://rosshall.online/wp-folder/wp-content/uploads/2021/some-random-image-1024x1536.jpg 1024w" sizes="(max-width: 1200px) 100vw, 1200px" />
</figure>

Above: Example code generated by WordPress for an image in a blog post. Note how different files are referenced for the various sizes.

Ah, you might say, the Gutenberg editor lets you choose which image size to present. It is true there is an option on the Block settings to set the image size. All this does is set the maximum image size and the fallback if the visitor’s browser doesn’t support srcset.

How do you present THE version of the image you laboured over?

My current solution is to “unset” these alternative images sizes. This tells WordPress to behave as if they don’t exist. Uploading an image doesn’t create the half dozen extra files. When a page is presented in a browser, srcset only has my original file to use. The visitor always gets the version I intended to be shown, which is then sized to the user’s device using responsive css. Frankly, web browsers are far better at scaling images than WordPress.

The following code is in my site’s plugin:

function wp73721_clean_up_image_sizes( $sizes ) {

    // I remove unwanted image sizes to both reduce disk usage and simplify code

        // These 3 image sizes are accessible via "settings->media"
        unset( $sizes['thumbnail']);
        unset( $sizes['medium']);
        unset( $sizes['large']);

        // These 3 image sizes are not accessible in settings
        unset( $sizes['medium_large']);
        unset( $sizes['1536x1536']);
        unset( $sizes['2048x2048']);

        return $sizes;
    }
    
add_filter('intermediate_image_sizes_advanced', 'wp73721_clean_up_image_sizes');

(Feel free to copy / paste the above code into your own theme or plugin)

This gives me a responsibility to optimise my images before I upload them. As a seasoned content manager this is nothing new. All of my original files are archived and ready to be optimised again if technology dictates.

Caution, Will Content Manager

There are a couple of drawbacks. Some themes use the smaller image sizes in index and blog pages so they load faster. When they’re removed, WordPress will use your full-sized image, which can slow page load times. I use a custom size for my index images, correctly scaled to fit in its placeholder on the page.

You could also increase the time it takes a page to load. I use the plugin A3 Lazy Load to soften the blow. It loads images as they’re needed, which reduces the time taken for a page to appear and doesn’t waste bandwidth for those who abandon a page early.

Bottom line: ditch the default image sizes in WordPress.

WordPress is not an image editing app, and its approach to scaling your carefully crafted content is patchy. If you are concerned your design is being compromised, it may be best to unset the troublesome extra sizes. You’ll need to pay extra attention to how you optimise them, but the benefits in preserving your design are worth it.

Born in the UK in the early 70s, I’ve enjoyed a diverse and eclectic career. I spent time in IBM, survived the dot.com bust, got myself well known in Insurance, and lived through more digital transformation projects than is healthy. In late ’20, in the middle of a pandemic, I upped sticks and moved to Kobe, Japan with my wife.

Like what you read? Sign up for my weekly(ish) missive, delivered straight to your inbox.