-
Posts
-
Hi
On most of the sites I produce I use a full width easy slider as a hero image on the home page with a minimum height set to cover the element.
Since srcset was added to this element on small screen sizes like the Moto 360px wide device it serves the 360px wide image which is then stretched to the minimum height – resulting in a blury image.
So if I set a minimum height on the element it always displays an image that is too low resolution for the intended use.
Is there a way to remove some image sizes from srcset specifically for the full width easy slider to prevent it serving images that are not high enough resolution being used?
Otherwise I am going to have to reduce the optimisation accross the entire site by removing the smaller image sizes.
Hey Thomas,
Thank you for the inquiry.
The wp_calculate_image_sizes filter might be useful in this case. The function returns the calculated sizes for a specific image, which is then used in wp_image_add_srcset_and_sizes function.
// https://developer.wordpress.org/reference/functions/wp_calculate_image_sizes/
// https://developer.wordpress.org/reference/functions/wp_image_add_srcset_and_sizes/Best regards,
IsmaelHi Ismael,
THank for your the info. I’ll take a look and see if I can tweak the function.
I suddenly realised I raised this ticket twice. Sorry.
Gunter has sent me a solution using a new function to disable Srcset per element. Because I have some good image compression it has resulted in no change to the site speed and performance testing. Really pleased.
Hi,
Thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardHi!
Just noticed that the wp_calculate_image_sizes only returns the sizes attribute. For the actual srcset attribute, please check this function which also contains a filter so that you can adjust the image sizes or sources.
// https://developer.wordpress.org/reference/functions/wp_calculate_image_srcset/
Regards,
Ismael
- You must be logged in to reply to this topic.