Customer Support
Lets go over the basics of the Page Hero vs the Featured Image.
1. The Page Hero.
This displays a <div> element and paints its background using CSS background-image -> the featured image.
To display the image, the <div> has to be given some height. The % padding is whats give its the height.
% padding allows for responsive resizing.
However when you have different size / aspect ratio images those %’s would have to change for each image or you end up with the issue you raised:
Why the Feature Image is out of the screen on Mobile devices and on a desktop is resizing appropriately?
So unless all images have the same aspect ratio you’r going to have to write a lot of CSS to change each % padding for each different image size for Desktop and Mobile.
Further to this the background image doesn’t have src-set sizes and MOST image optimization plugins wont work with them.
2. The Featured Image
This displays the image using an HTML <img> element.
By default they are responsive. You will see 100% of the image at all screen sizes.
Theres no requirement to use CSS % padding ( or other properties to size them – in fact YOU don’t want to do that as it can cause performance issues ).
<img> elements use src-set sizing – which means the browser can select the image size thats best suited to the device its displayed on. And those can be optimized by ALL optimization plugins.
As the main issues you’re having is performance – the Featured Image <img> option is the best option.
If you want to control its sizing then change the CSS to this:
.featured-image.grid-container {
max-width: 1200px;
}
.featured-image.grid-container img {
width: 100%;
}Change the max-width: 1200px; to match your container width or whatever size you want to limit it to.
NOTE on LCP.
Google will always report an LCP Element – whether there is a slow of fast LCP timing. Now its an Image element as opposed to the page-hero div is a good thing. As now you can deploy whatever image optimization process you require.
But i must say that we are going around in circles with the Improving LCP support topics.
I still see huge fluctuations on site performance from one test to another, which the Theme or the Featured image has no baring on. This is the last test i ran:
https://www.screencast.com/t/RY4sClxpzMB
This is all down to Google not liking the amount of Javascript being served to the page.
