Media queries and performance vs displaying a large-file-sized image on smaller screens

Question

I'm just taking over a WordPress site as a developer from another developer, so many things are already in-place. Currently, the site is serving up the same large-sized (and large file size, over 500KB for the single file) - image, and I'd like to get it so the performance and loading-speed on mobile is much faster (there are a few large images as well).

My first thought is to possibly override thing and use just a simple media query - just one for "bigger" screens (Eg. Desktop) and one for screens that are say, a small iPad and below.

However, I'm not sure how "expensive" a media query is, and which method (or something else entirely) would give the best performance boost:

a) Keep things how they are currently and just keep it serving up the larger images for smaller devices.

b) Use 2 media queries in the main style sheet - One for larger screens & one for smaller ones (anything in the middle would just take what it gets).

c) Something else?

The WP site is very custom and uses some extra plugins and code that make it so WP doesn't auto-serve the smaller size like it normally does, and it's not something I can really change, at least not right now.

My main question is, how 'expensive' are CSS media queries? I've looked at many posts but haven't been able to find a definitive answer for this type of situation.

I'm wondering if the processing of the media query would actually take more time in the end than it would to just have the user download a fairly significant sized image (and there are a few of them)?

Use something like:

/* This would be for the mobile or at least smaller screens across the board */
@media only screen and (max-width: 600px){
    imageOne img {
        background-image: url("smallerFile.jpg");
    }
}

/* Then, this would be for larger screens, across the board */
@media only screen and (min-width: 601px){
    imageOne img {
        background-image: url("LARGERFile.jpg");
    }
}

My client is very stuck on the idea of using Google PageSpeed Insights and getting a high number on it. This is where my thinking of using a media query comes in, as currently the site gets a high score on the desktop side, but a very-low score on the mobile side (A lot of which has to do with the large image sizes).

I know that the PageSpeed Insights score doesn't always translate into real-world speed increases, but my client is, well my client.

In the end, I'm wondering if I'm chasing things down a rabbit hole, trying to just get a high rank/number. But a few 500KB+ images on mobile is definitely not very optimized, any way I look at it. Any thoughts?

This is my very first post to Stack Overflow, so I hope I've filled things out correctly and it makes sense. Sorry if I made things a bit too long, trying to fit in details or too much background.

I know this is a semi-basic question, and I've tried testing things using browser test tools, but I'm not a pro at those, so I could easily be reading things incorrectly or not even looking at the right value.

And, I really have gone through countless sites and posts and still haven't been able to really pin-down a clear answer to this - as I don't know exactly how things are processed and how much "tax" a media query takes to process (Which is why I was thinking about keeping it to just 2, and not any more complex - unless I should?). Sorry for the rambling,

Thank you all very much and I am really hoping someone could point out what they think would be the best approach?

Answer 1

I had an issue very similar to yours.

I decided to use Wordpress' built in function wp_is_mobile() to solve my problem.

In my theme template files I would just add an if else statement checking whether the user was on a mobile device or not, and serve different content based on the device.

if (wp_is_mobile()) {
    ... smaller mobile content ...
} else {
    ... larger PC content ...
}