Site logo

Archived topic

Is there a way to load smaller image versions on mobile?

18 replies · Started by Héctor on June 15, 2021

Viewing posts 16–19 of 19

Thank you very much!

You're welcome

Hello David

Can you please explain a little more in detail the values in this code:


function db_modify_srcset_sizes($sizes, $size) {
	return '(max-width: 500px) 500px, (min-width: 501px) 893px, 100vw';
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

I know that the first argument refers to whenever the viewport is 500px or less, you establish the image width to be 500px as well. Where I get lost a bit is in the second and third argument. My guess is, from a viewport of minimum 501px, then use 893px instead. Finally the third argument I am not that sure what it means, but again, my guess set the width of the image to whatever the viewport width is.

Am I right?

Hi Geraldo,

Yes, you are correct. Here is an article you may refer to that perfectly explains this: https://medium.com/@duongphan/controlling-responsive-images-in-wordpress-breaking-down-the-code-7d36dd273787#:~:text=There%20are%20two%20conditions%20here%2C%20the%20first%20if%20a%20sidebar%20is%20present%2C%20the%20second%20if%20there

“The last property, which only lists a width, is the fallback that stipulates the maximum width the image will ever be displayed as regardless of the width of the viewport.”

Hope this answers your inquiry! Feel free to reach out if you have anymore questions! :)

This archived topic is closed to new replies.