Archived topic
Cover Image - Image Length
5 replies · Started by Ella on October 16, 2021
Hi guys,
I'm still trying to "get into the green" on my Google Web Vitals, and I was recommended by another person (who also has a generatepress blog and is passing their web vitals) to reduce my image size - particularly on my cover images on the top of blog posts (which is "above the fold")
See my site here: http://www.forgettingfairytales.com
Where can I do that in settings please?
It's also been flagged up that my logo is big - what dimensions would I need to upload that as to shrink it down, or can I shrink it down in another way?
Thanks for your help,
Ella
Hi there,
Looking at the container width and page hero size you are using, I'd recommend using featured images with dimensions around 1200 by 600px.
Then make sure you optimize the image using a service like this one:
https://imagecompressor.com/
Oh, so I have to edit the image dimensions before uploading, then upload them all at this size to reduce them all that way? What dimensions are my images at the moment please?
I already compress my images, but I can also crop them to make them smaller if that will help!
Thanks,
Ella
Hi there,
i checked your latest post image and its original size is 2560 × 1706 pixels.
Cropping them as Leo suggests to 1200 x 600px will significantly reduce the file size.
Thanks for clarifying that. I’ve just looked into this a little more and I don’t think it would work for what I'm trying to achieve... Because if you see here - https://ibb.co/Q9fNzCH - these images are two different dimensions but when you click on each of those posts (tested first on desktop), the cover image size is readjusted to take up the same length of the page anyway... and that's what needs to change. It’s the length of the image and the amount of space it fills in the screen that’s affecting the loading and web vital speed I think.
Although (another way around it perhaps)- it’s been flagged up that the issue is the image is being loaded from CSS. This is limiting us from generating critical CSS. Is there any way to load the featured image via image tag or inside inline html instead please?
Thanks,
Ella
It doesn't really matter if you have images with different aspect ratios ( ideally you should try to keep them all the same ) - with the background image, it will automatically fill the container. So you can resize images to 1200px wide, and allow the photo app to set the specific height.
For the Critical CSS - theres always going to be potential pitfalls, i personally don't use it for the amount of headache it can cause. But most of the plugins provide an exclusion field, that allows you to list the CSS classes that you want to exclude from the Critical CSS.
For your page hero you could try adding:
.gb-container-e8aeea56
