- This topic has 23 replies, 2 voices, and was last updated 2 years, 9 months ago by David.
-
AuthorPosts
-
June 12, 2021 at 9:11 am #1819904Evenit
Scrset images not working good in my site. Browser uses the full larger image in mobile version. Please check the first image of this page: https://www.viaggi-usa.it/citta-usa/los-angeles-citta-usa/
Google Speed insights tells I am using the full image and so the chrome inspector. May you help me with this?
ThanksJune 12, 2021 at 5:23 pm #1820133DavidStaffCustomer SupportHi there,
yeah WP’s src-set relies on an image to fill the width of the viewport for the browser to select the most appropriate image.
Couple of options:1. uncheck Display Padding around Image in Customizer > Layout > Blog –> Featured Images >>> Posts (tab). 2. Or we can use a PHP Snippet to force the browser to load a smaller image:
function db_modify_srcset_sizes($sizes, $size) { return '(max-width: 420px) 300px, (min-width: 421px) 768px, (min-width: 769px) 1024px, 100vw'; } add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);
June 12, 2021 at 10:29 pm #1820225EvenitHi thanks, I added the code, it seems to work for other images in the page, but not for the featured image. If I check the mobile viewport in the Chrome inspector I see currentSrc: “https://www.viaggi-usa.it/wp-content/uploads/2017/11/Scritta-di-Hollywood-come-fotografarla-01.jpg”
The image should be https://www.viaggi-usa.it/wp-content/uploads/2017/11/Scritta-di-Hollywood-come-fotografarla-01-768×344.jpgJune 13, 2021 at 2:32 pm #1820925DavidStaffCustomer SupportIf you have disabled the Padding on the images – then you ‘shouldn’t’ require the code as well. What happens if you disable the code ?
June 13, 2021 at 2:53 pm #1820942EvenitI couldn’t find the option to disable the padding by following the path you suggested. Could you please send me a screenshot?
June 13, 2021 at 3:08 pm #1820947June 13, 2021 at 3:21 pm #1820949EvenitThanks David. That option is already disabled. Also the featured image is disabled, I use a Page hero with this code:
<div class="featured-image page-header-image grid-container grid-parent"> [featured_image] </div>
I use a shortcode you suggested me in this ticket: https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/#post-1817077
June 14, 2021 at 12:48 am #1821189EvenitI gave it another try.
I have removed your code that forces the browser to use the scrset and then removed the header with the [featured_image] shortcode and enabled the featured image in the Customizer (padding is not enabled).
You can see the results in this article https://www.viaggi-usa.it/harlem-film/
As you can see it still doesn’t work. Not only the featured image but all the images inside the post are served as Full image even if we are on mobile. Scrset doesn’t work and I don’t understand why.June 14, 2021 at 3:12 am #1821313DavidStaffCustomer SupportI think the issue now with the featured image is because of the lazy loader – its using data-src but missing its data-srcset… can you put back the previous header element, so i can take another look
June 14, 2021 at 4:03 am #1821354EvenitYou can check at the URL https://www.viaggi-usa.it/citta-usa/los-angeles-citta-usa/
I did not change for itJune 14, 2021 at 4:54 am #1821402Evenitjust be sure I understood correctly. For that URL (https://www.viaggi-usa.it/citta-usa/los-angeles-citta-usa/) your code for forcing srcset is still operating. Do you want I disable it?
Also on the desktop I see the featured image is loading the wrong image, 768×344 instead of Full…June 14, 2021 at 5:00 am #1821410DavidStaffCustomer SupportChecking the Mobile Dev tools i see this:
So it is actually making the correct request for the image ( the second one in the list )
However you have a Preload link in the head that is making the first request… which is annoying as you can see the Preload link also has the same src-set sizes – so it should preload the correct image:It could be Page Caching on the Server that has ‘locked’ in the desktop file size request… but not sure.
Is it possible to disable the preload for the featured image ?
June 14, 2021 at 5:27 am #1821430EvenitI have removed the image preloading. Now I see it is serving the 990×444px image in the mobile version, it’s improved but still too big…
June 14, 2021 at 5:36 am #1821442DavidStaffCustomer SupportI am not sure that is the wrong size image… Google Simulates a Moto 4G phone which is a x3 HD screen – so 900px ( or higher would be the correct size image ). When i test it on a x2 Retina screen the device makes the 768px request.
I also ran a PSI test on the link and it not longer raises the Resize Images opportunity.
June 14, 2021 at 6:17 am #1821479EvenitOk so the issue was the image preloading in your opinion?
-
AuthorPosts
- You must be logged in to reply to this topic.