Archived topic
Featured Image: Avoid background images and use img tags
7 replies · Started by Ella on March 10, 2022
Currently I am using blocks to create a hero section for the posts which pulls the featured image dynamically, but the issue is it is creating huge LCP. And my optimization plugin support suggested to avoid background images and use img tags for featured image and reffered to this guide https://wpspeedmatters.com/speed-up-background-images/.
Hi there,
have you tested a page without the page hero ?
This will identify whether the Image as background is the real problem.
You can do this by editing the Page Hero Block Element and adding one of your posts to the Display Rules Exclusions.
Yes that is the issue I just removed the bg featured image and now the LCP is green. I was able to insert img tag as featured image manually with inspect element but I don't know how to add the img tag to each posts via snippet.
You won't be able to replicate that design ie. the text over the image. So the title and post meta would have to be displayed below or above the image. Let me know if that is acceptable and we can advise.
Question was any image displayed in its place when you removed the background ?
Yes, I just want to inject the featured image with img tag manually via the PHP.
No Image was displayed when i removed the background there was just the placeholder. Then I added this line in the inspect element.
<img src="https://flyingcdn-6e68a3c7.b-cdn.net/wp-content/uploads/2021/09/Emojis-Guys-Use-To-Flirt-1-768x512.jpeg" alt="Paris" class="feature">
Can you choose a post that your happy to remove the page hero from temporarily.
And then edit the Block Element Page Hero and select that Post in the Display Rules > Exclusions.
Once that's done can you link me to that post ? Its worth testing to see what different it makes with the themes default featured image in place
