How to set “appropriately-sized” featured image in twenty twenty four?

Twenty twenty four is meant to be fully responsive, but when I check in Google pagespeed, the images are full-size res even on mobile screens.

Context: I’ve recently switched themes, so my previous images / sizes are all still in my media library.

What steps should I take to ensure I have the right image sizes available for different screens, and then how do I set my WordPress theme to use them at the right time?

Thanks for any help!

1 Comment
  1. Is this going wrong with a specific type of block or across the board?

    I tried Twenty Twenty Four just now and it seems to automatically download the appropriate size. In other words, I cannot replicate your problem.

    The only 2 issues I could find:

    1) The device you test in (or that Google Page Speed pretends to test in) may have a Device Pixel Ratio (DPR) so high that it will still force a download of the larger image.

    2) When I initially tried the Hero pattern, it would force the larger image. Only when I replaced that image by one of my own would it switch to the appropriate size.

    What sizes are your images (width×height)? Which (mock) devices do you test on?

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer