What does m=6 l=4 do?

[frobert]

What does m=6 l=4 do? I don't get it...

{% picture profile.picture img_alt="Spiderman" img_loading="lazy" picture_class="my-picture" m=6 l=4 %}

thanks

[codingjoe]

Hi @frobert 👋,

Thank you for reaching out. Those keywords refer to how many columns of your gird are occupied by the picture. So if you have m breakpoint of 769px, 6 columns of that will be 358w. Based on this information, a correct media directive is created to tell the browser which resource to load. Of course, if your browser already has a larger version cached, it will probably use that image instead.

Do you have a suggestion how we could improve the documentation to reflect this behavior a little better?

Cheers!
Joe

[frobert]

Hi, thanks for the info, I'll try again and keep you posted, to me it seems like there was no changes when using these params...
Also it would be nice to somehow override the main tag width and height, as for some situations PageSpped is complaining.

For sure better documentation with few examples :)

best regards.

[codingjoe]

Hi @frobert,

I understand where you are coming from. It takes a little getting used to. Maybe consider how much control you actually have over the render size of an image. Especially with things like an iPad Pro that renders graphics at 4x pixel density.

If you need further assistance, please don't hold back, sharing a screenshot and the code rendered by the picture template tag. I'm happy to help you debug your code.

Cheers!
Joe