Update picture source markup and make sizes attribute configurable from shortcode. #34
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In general images plugin works quite nicely for setting up responsive sizes for the same image.
'Art direction' would be too complicated to handle for such a general tool.
Have some proposals though. Current picture markup looks like this
🔗respimagelint complains about source elements:
So, with w descriptors and sizes attribute it should look like this instead ('data-' prefixes are added for 🔗vanilla-lazyload)
According to 🔗css-tricks x descriptors (1x 2x etc) only account for a small percentage of responsive images usage while using srcset / w + sizes accounts for around 85% of responsive images usage on the web.
As sizes attribute is too layout specific, it could have default value "100vw" and be configurable from shortcode as
As I understand, exact sizes are almost impossible to set by hand as each browser does its own thing:
Also 🔗respimagelint tool gives sizes suggestions that can be copied to shortcode from there.
No idea how this works but for example using it's suggested sizes on above the fold image:
effectively calmed down lighthouse complaints about images with inappropriate size.
Used resources