Archived topic
image size requested for featured images
8 replies · Started by kiant123 on August 18, 2021
Hi,
I was speaking to a plugin author about my pagespeed insights results and he said that my featured image on mobile looks like it is requesting a 1000x667 image in the space for that image, when the space is only 337x225.'
1000x667 is the original size of the featured image when I uploaded it. Does this mean that I have lost some of my thumbnails sizes that should have been generated when the initial image was uploaded? Or is there some setting in Generatepress that I may have changed accidentally?
I do remember a few weeks back messing about restoring my original image compression and trying to regenerate the thumbanils again. Perhaps they didn't regenerate properly?
Hi there,
all your image sizes are still in the src-set. The browser can select the best sized image for its purpose, screen size, resolution etc. However one of the factors in the browser making this decision is the sizes attribute in the image.
By default WordPress uses this:
sizes="(max-width: 750px) 100vw, 750px
Which without explaining the goobledigook is the 750px width image will be used IF the image fills the viewport of the screen. As your images have padding round them, they don't fill the viewport width. Which leaves the browser to choose what size it thinks is best. Which can result in it choosing the largest size.
There are some things we can do to change that behaviour. The simplest one for you would be to set the max_width loaded in the src-set using this PHP Snippet:
function set_max_srcset_width( $max_width ) {
$max_width = 750;
return $max_width;
}
add_filter( 'max_srcset_image_width', 'set_max_srcset_width' );Hi,
Before I try adding the PHP. Would it be simpler if I moved the padding around the featured image?
I tried to do this using the customizer toggle and it now appears I have some padding to the right of the image. Do you know what this is or where it comes from? Could this be causing the issues?
I've worked out that the space is the right sidebar showing up which I was hoping would only show up on desktop but seems to be the reason for that space.
So how would I set things back to normal so that I can avoid using that PHP script if possible and make sure browsers are picking up the correctly sized images?
Can you disable the padding around the image so i can see what the issue is ?
Hi David,
I've disabled the padding.
Thats weird.... try adding this CSS to fix that:
@media(max-width: 768px) {
.one-container.right-sidebar.post-image-aligned-center .no-featured-image-padding .featured-image {
margin-right: -30px !important;
}
}Hi David,
Before I add that code you supplied, I see that Mediavine added some code a while back (I can't remember what it's for!).
Would this have anything to do with it the issue?
I've deleted the bottom one as a test and I don't see any difference to my site so I am wondering if i can delete it.
Yeah you can delete the bottom one.
