Open davidnuescheler opened 3 years ago
Makes sense! I found this (older) blog post on the topic helpful: https://medium.com/front-end-weekly/html-picture-tag-in-practice-png-and-webp-formats-5a3fc51b5998
I am definitively for this solution! Letting the browser decide is definitively better than forcing the developers to copy/paste a lot fo code to handle non supported formats. The cost is only some few more characters in the html.
see: https://github.com/adobe/business-website/pull/52 i think the resulting DOM could/should be the default picture tag
see below an example of the resulting DOM, that should be the markup...
<picture>
<source media="min-width: 400px" type="image/webp" srcset="/drafts/uncled/blog/media_12b2e2904807a8b21c5a82d72bd741746f7424d29.png?width=2000&format=webply&optimize=medium">
<source type="image/webp" srcset="/drafts/uncled/blog/media_12b2e2904807a8b21c5a82d72bd741746f7424d29.png?width=750&format=webply&optimize=medium">
<source media="min-width: 400px" srcset="/drafts/uncled/blog/media_12b2e2904807a8b21c5a82d72bd741746f7424d29.png?width=2000&format=png&optimize=medium">
<img src="/drafts/uncled/blog/media_12b2e2904807a8b21c5a82d72bd741746f7424d29.png?width=750&format=png&optimize=medium" loading="eager" alt="">
</picture>
i think the code is a bit more revealing with respect to how to handle extensions different extensions in the fallback case...
https://github.com/adobe/business-website/blob/main/scripts/scripts.js#L377-L409
@davidnuescheler how do you see this change relate to https://github.com/adobe/helix-home/issues/146? This seems to be an opportunity to transport width and height to the markup. As we're about to break the picture
behavior anyway 😉
i think my assumption in https://github.com/adobe/helix-pages/issues/657 that
webp
would quickly be used broadly, has not really manifested quickly enough, and/or the impact is too big...we currently use a webp polyfill for old browsers (see: https://github.com/adobe/spark-website/blob/main/express/scripts/scripts.js#L616-L686), but i think it is a clunky and it seems that we will have to stick with that for the foreseeable future.
i think the best way to fix that would be to use extra
<source>
tags to target old browsers, but wanted to see if people have input. i think this should be backward compatible, so i don't think this would require a breaking change.maybe @tripod, @rofe and @kptdobe have input. if we think that's the way to go i am happy to try to find the exact
<picture>
-tag that we should migrate to.