Image container size too small when Jetpack image accelerate is on

Jetpack Site Accelerator looks at the img element’s width and height attributes and then serves an image resized to those dimensions or to the width of the containing element (whichever is smaller). By default, Jetpack will constrain images to the larger of the size indicated when adding the image to a post or to your theme’s “content width” setting.

I see you’re using the Twenty Twenty One theme. Have you made any changes or customizations to that theme, especially related to the content width?

Are you using any other plugins that may be affecting the site’s content width? I’d recommend deactivating all other plugins except Jetpack, and checking the images in Jetpack Site Accelerator with those other plugins deactivated. If the images appear in the normal width, than you know one of those other plugins is causing the problem. You can reactivate those plugins one by one, checking the image width after each one, to discover which plugin is causing the problem.

Thanks for your response. Turn out Twenty Twenty One theme (or WordPress) has a setting called “media width” under the Customize CSS text box. It was set to 640 but the post width was 840. It was honored when the JetPack Image Accelerator was turned on.

Setting it to higher value works perfectly.

Hi @sdart101,

Thanks for the update!

I’m glad that adjusting the Media Width in the customizer on Twenty Twenty-One resolved this issue.

To recap for other users, if you’re using Twenty Twenty-One, you can adjust this setting by going to Appearance > Customize > Additional CSS and then scrolling down to Media Width.

If you have a value entered here, Jetpack’s Image Accelerator will constrain the image based on that value.