Archived topic
Page element featured image unable to show optimized webp from Imagify etc.?
3 replies · Started by William on October 24, 2021
Hi there,
I am using Imagify (and have tried others as well) to optimize images for better LCP etc.
All images are optimized. However, I find the images that are featured images as a background in the page hero element does not show the webp optimized version, but the originals -is there a reason this is the case? I've tried a few image optimization plugins and all struggle to show the optimized version.
See an example page showing the original jpg featured image here.
Kind regards,
Will
Hi William,
I'm not exactly sure if Imagify can fetch images applied through CSS (background-image property).
It's functionalities are outside of our control as it's a third-party plugin. We suggest contacting Imagify's support if perhaps they have a solution for this.
I found this for you - https://wordpress.org/support/topic/serve-webp-for-background-images/#post-14001226 - but this is a bit dated. They may already have a newer solution.
Hi Elvin,
Example
- This Page https://gpsites.co/dispatch/styling/
- This image https://gpsites.co/dispatch/wp-content/uploads/sites/33/2018/11/juan-camilo-navia-762435-unsplash.jpg
.gb-container-e8aeea56 {
...
background-image: url(https://gpsites.co/dispatch/wp-content/uploads/sites/33/2018/11/juan-camilo-navia-762435-unsplash.jpg);
....
}
There's way to not to be a background image, so we can server different image size , Example from the same page
< i m g width="300" height="200" src="https://gpsites.co/dispatch/wp-content/uploads/sites/33/2018/11/moss-370458-unsplash2-300x200.jpg" class="attachment-medium size-medium" alt="" loading="lazy" srcset="https://gpsites.co/dispatch/wp-content/uploads/sites/33/2018/11/moss-370458-unsplash2-300x200.jpg 300w, https://gpsites.co/dispatch/wp-content/uploads/sites/33/2018/11/moss-370458-unsplash2-768x512.jpg 768w, https://gpsites.co/dispatch/wp-content/uploads/sites/33/2018/11/moss-370458-unsplash2-1024x683.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px">
Thank you
There is definitely a way but you'll have to programmatically pull the featured image and add it in as a shortcode instead of as a background image on a container block.
Example Shortcode:
add_shortcode( 'featured_image', function( ) {
ob_start();
$postID = get_the_ID();
$featured_img = get_the_post_thumbnail(
$postID,
apply_filters( 'generate_page_header_default_size', 'full' ),
),
echo '<div class="featured-image-wrapper">'.$featured_img.'</div>';
return ob_get_clean();
});You then style it with CSS to force it to behave like a background image. It's generally done by adding position: relative; to the parent and adding position: absolute; width: 100%; height: auto; to the image(or its wrapper).
