[Resolved] Featured images sizes used

[ch1800]

I have the container set at 1100 px and was uploading all my images with 1200 px width, until I let my client create some posts and discovered that not only he uploaded huge sizes but also that Featured images were using the original file of the selected image by default in pages (as as the one linked here) and not the largest resized by WP at 1024 px.

I further read similar tickets here and discovered that I can set the Featured image sizes in Customizer and never noticed that previously…

So, my question is two-fold:
– which sizes should I set in Customizer for Featured Images such as this page here?
– may I modify this setting afterwards, after pages are published, when my current setting for those images in Customizer is empty (Auto)?

Thanks.

[David]

Hi there,

probably better to change the Large image size in Dashboard > Settings > Media to cover the 1100px size. Then install and run the Regenerate Thumbnails Plugin.

[ch1800]

Thanks but this doesn’t answer my question: why Featured images are loading the original full sized files instead of the largest WP sizes and should I change the sizes under customizer > Layout > Blog or leave them with the default Auto size?

[David]

Browsers choose the image size that best fills the container it sits in.
As 1024px doesn’t fill the 1100px container it takes the next available larger size.
Browsers supporting a retina/hd device will also look to see if there is an image 2x ( 3x 4x ) the size.

Maybe the Blog options Featured image size is better suited for your need – this will add the 1100px image size to the srcset and set the width and height attributes in the img html.

[ch1800]

Thanks David, I well understand your first paragraph and that’s what I also thought.

But don’t well understand what do you mean with the second one.
Do you mean that by adding the 1100px size in Dashboard > Settings > Media will solve this issue or that I should use this size in theme’s customizer Blog Options for Featured Image instead of the current Auto setting? Or both at the same time?

[David]

Sorry that was a little unclear … In Customizer > Blog > Featured Images – for Post and Page set just the width to 1100px. And leave the height as auto.

[ch1800]

Excellent, got it.

If you don’t mind 2 closing questions for better understanding the way that works with container:

If I’m not wrong, I think the default container was set to 1100px when installing this site and others the same. The logic seems to be that I should have set the Featured sizes at least at this width value, in order to avoid a browser picking up any other larger file that it finds. Of course, ideally, I presume that I should also upload originals at this size.

But then, why:
– the largest srcset is set to 1024 by default (in WP settings)?

and:
– what would be the interest in increasing the container size to, say, 2000px? (as I remember reading somewhere a post by Tom suggesting this).

[David]

WP sets the Large size to 1024px by default.
And GP sets the container width to 1100px as default. This i believe just from legacy and as most sites would be 1100px with 80px of padding around the image the default WP media sizes worked fine.

2000px – not sure why Tom would suggest it – maybe as a shortcut for creating ‘full width’ sites. But that can be done with the Pagebuilder container option on a page by page basis

[ch1800]

Many thanks, well noted.

[ch1800]

RE my previous post about container width set at 2000px.
I just found it.
It’s not a comment by Tom but a paragraph in documentation:
https://docs.generatepress.com/article/container-width/

But I still not well understand you would need such width for full width sites.
You can get full width with container set at 1100px – or I’m I completely wrong?

[David]

When he says Full Width its for those sites that are designed to have content extend to either side of the browser viewport no matter how wide the screen is. Albeit that shortcut 2000px method wouldn’t apply to really big monitors.

[ch1800]

Thanks for clarifying.

[Author]

Posts