Some Questions about Volume Site

1. Thats correct. Any image above the fold that is identified as the ( or part of the ) LCP element ( ie. it occupies the largest number of pixels ) will negatively affect LCP times, as the image has to be requested and downloaded.

2. Difference between Marketer and Volume - yep thats correct too. The background images take longer to load as the request is made later than a HMTL Image.

3. It is possible but its more complicated to setup and style and not something that could be easily accomplished in the GB UI. It also a hack making them perform like background images, so more prone to breakages. The Volume site provides the best of both worlds, background images on desktop where bandwidth isn't an issue, and a HTML image below the fold for mobiles :)

Thanks.

1. So, a Featured Image in a Post in the Marketer Site for example, is also an above the fold image. Then there must be the same issues, right?

Yes, but the default marketer site displays the default Featured Image which is HTML Image. They get requested when the HTML is loaded so load a little bit quicker then a CSS background image.

okay, got it. Thanks.

Now I must think again, which site I will take for a new planed website.

As a note: all things mentioned above can be optimized. But personally i like to consider them in the design process and then the optimizations provide even better results!!

You're welcome.

Hi David
Using the Volume theme how would I set the size of the featured image for mobile to the medium - 320 × 240.

I'm getting a warning to Properly size images on google psi. The image is showing as <img width="768" height="576", does that mean its not responsive?

Example post: https://www.savvyhomemade.com/bath-bomb-recipe/

Thanks
Brian

Hi there,

edit the Single Post Hero in Appearance > Elements - select the GP Dynamic Image Block, which only displays on Mobile, and change the Image Size from medium_large to medium. This will set that as the maximum size.

That works, but it's slightly too small, how would I center it?

Add this CSS to force it to fill the space:

.dynamic-featured-image.wp-post-image {
    width: 100%;
}

Perfect David, thanks for the help!

You're welcome