[cindy]

I’m getting messages like this in Page Speed Insights:

This image file is larger than it needs to be (1024×819) for its displayed dimensions (291×231). Use responsive images to reduce the image download size.

I thought Catch Responsive Pro handled that.  What’s going on here?

It also tells me:

“Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image’s download size.”

I have WebP images available. How do I get Catch Responsive to use them?

Thanks.

Cindy

 

[sujapati]

@Cindy: Thanks for reaching out.
Catch Responsive Pro supports responsive images, allowing WordPress to serve an appropriate image size based on the display dimensions. However, the theme does not automatically convert images to WebP or AVIF.
The PageSpeed warning indicates that the image being served is larger than its displayed size. You can use any free online image optimization tool to convert images to WebP or even compress jpg/png files to reduce their file size.

Regards,
Sujapati

 

[cindy]

Thanks for the info on WebP. Had no idea how that worked. That’s the direction I’ll move, which will help.

BUT I’m confused about the size information. You said “Catch Responsive Pro supports responsive images, allowing WordPress to serve an appropriate image size based on the display dimensions.” So it pulls the full-size image and then scales it down to the appropriate dimensions?

If so, that sucks for site speed. Shouldn’t it be pulling the the smallest size “thumb nail” (whatever you call the multiple copies created in the background in WordPress) that is as large or larger than needed and then fitting it to the display? The dimensions needed for a desktop these days are dramatically different than what’s needed for mobile. And you need a larger file size to look good on a desktop than you do on mobile, so the answer isn’t just compressing files.

Are there themes that do this, or would I have to have two different set-ups: one for desktop and one for mobile, where the mobile set-up always grabs a file with smaller dimensions? And is that even possible with a Catch theme? (I really like how stable and user-friendly your themes are.)

Cindy

 

[sujapati]

@Cindy:

You’re absolutely right. WordPress already uses responsive images through srcset and sizes, allowing the browser to select the appropriate image size without separate desktop and mobile setups.

In this case, PageSpeed is reporting the 1024*819 image because the current sizes attribute indicates the image may occupy the full viewport width (100vw). So, the issue is with the sizing information rather than the lack of responsive-image support.

Regards,
Sujapati

[Author]

Posts