change to default <picture> behavior

[davidnuescheler]

i think my assumption in #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.

[rofe]

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

[kptdobe]

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.

[davidnuescheler]

see: adobe/business-website#52
i think the resulting DOM could/should be the default picture tag

[davidnuescheler]

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&amp;format=webply&amp;optimize=medium">
  <source type="image/webp" srcset="/drafts/uncled/blog/media_12b2e2904807a8b21c5a82d72bd741746f7424d29.png?width=750&amp;format=webply&amp;optimize=medium">
  <source media="min-width: 400px" srcset="/drafts/uncled/blog/media_12b2e2904807a8b21c5a82d72bd741746f7424d29.png?width=2000&amp;format=png&amp;optimize=medium">
  <img src="/drafts/uncled/blog/media_12b2e2904807a8b21c5a82d72bd741746f7424d29.png?width=750&amp;format=png&amp;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

[rofe]

@davidnuescheler how do you see this change relate to adobe/helix-home#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 😉