- This topic has 4 replies, 3 voices, and was last updated 5 months ago by
David.
-
AuthorPosts
-
August 23, 2020 at 6:43 pm #1415391
Bevan
Hi,
I’m trying to improve my Largest Contentful Paint and looking at the performance of my site I can see that the page hero element is the LCP.
When I am on a mobile device the image that is being used is the desktop version at 2560×1200. Is there a way to have the optimised version of this file?
Thanks,
BevanAugust 24, 2020 at 3:00 am #1415700Longinos
If you use the image in the html (NOT as a background image) and the image is in the media gallery, you can try this:
1.- Open a new post
2.- Insert a image block
3.- Select the image you use in the page hero
4.- Preview the post
5.- View the html from the preview
6.- Copy the image element. This element has a srcset with imaes for diferent sizes.
7.- Paste it in the html of the page hero.August 24, 2020 at 3:37 am #1415758David
StaffCustomer SupportHi there,
i would suggest optimizing the original image. It is 800kb+ – with a desktop optimization app you should be able to get it down to around 100kb without noticeable quality loss.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 24, 2020 at 9:40 pm #1416936Bevan
Hi David,
Thanks for the response.
I’ve played around with the Lightroom export settings and also compressing the image with JPEGmini but I have not been able to compress the image to around 100kb without compromising the image quality. Is there a tool that you can recommend?
I have also tried to cropping the image to 1500 pixels wide as we do not have many users who are on screens wider than this.
Regards,
BevanAugust 25, 2020 at 4:15 am #1417242David
StaffCustomer SupportI use ImageOptim but its Mac only.
Cropping the image should help. And ideally any savings in file size without harming quality is a benifit….However,
Try adding this PHP Snippet to your site:
add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) { if ( wp_is_mobile() ) { $image_url = get_the_post_thumbnail_url( get_the_ID(), 'large' ); } return $image_url; }, 10, 2 );
This will swap out the background image IF a mobile device is detected for the
large
attachment size.You can if you want register a new size using this function:
https://docs.generatepress.com/article/adding-image-sizes/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.