Problem/Motivation
Currently this module is incompatible with the
webp →
module. The html being output is not correct. Since this is going to be a quite common combination, I guess this is critcal. I tried to simplify the output of my current install as good as possible:
webp and avif enabled:
<picture>
<source srcset="/sites/default/files/styles/large/public/test.avif.avif?h=6eea90e3&itok=ODIG3MbH 1920w" type="image/webp" sizes="100vw">
<source srcset="/sites/default/files/styles/large/public/test.avif.webp?h=6eea90e3&itok=ODIG3MbH 1920w" type="image/webp" sizes="100vw">
<source srcset="/sites/default/files/styles/large/public/test.avif.avif?h=6eea90e3&itok=ODIG3MbH 1920w" type="image/avif" sizes="100vw">
<source srcset="/sites/default/files/styles/large/public/test.avif.jpg?h=6eea90e3&itok=ODIG3MbH 1920w" type="image/jpeg" sizes="100vw">
<img src="/sites/default/files/styles/1large/public/test.jpg?h=8bc4aa39&itok=hH2zrePO" alt="test">
</picture>
Those are the issues with the markup:
- The first
<source> doesn't make any sense. the file ending is .avif, but the type attribute is set to type="image/webp"
- The order of the
<source> tags should be:
- avif
- webp
- jpg
- All files have
.avif prefixed to their extension
expected output with webp and avif enabled:
<picture>
<source srcset="/sites/default/files/styles/large/public/test.avif?h=6eea90e3&itok=ODIG3MbH 1920w" type="image/avif" sizes="100vw">
<source srcset="/sites/default/files/styles/large/public/test.webp?h=6eea90e3&itok=ODIG3MbH 1920w" type="image/webp" sizes="100vw">
<source srcset="/sites/default/files/styles/large/public/test.jpg?h=6eea90e3&itok=ODIG3MbH 1920w" type="image/jpeg" sizes="100vw">
<img src="/sites/default/files/styles/1large/public/test.jpg?h=8bc4aa39&itok=hH2zrePO" alt="test">
</picture>
only webp:
<picture>
<source srcset="/sites/default/files/styles/large/public/test.webp?h=6eea90e3&itok=ODIG3MbH 1920w" type="image/webp" sizes="100vw">
<source srcset="/sites/default/files/styles/large/public/test.jpg?h=6eea90e3&itok=ODIG3MbH 1920w" type="image/jpeg" sizes="100vw">
<img src="/sites/default/files/styles/large/public/test.jpg?h=8bc4aa39&itok=hH2zrePO" alt="test">
</picture>
only avif (correct):
<picture>
<source srcset="/sites/default/files/styles/large/public/test.avif?h=6eea90e3&itok=ODIG3MbH 1529w" type="image/avif" sizes="100vw">
<source srcset="/sites/default/files/styles/large/public/test.jpg?h=6eea90e3&itok=ODIG3MbH 1529w" type="image/jpeg" sizes="100vw">
<img src="/sites/default/files/styles/large/public/test.jpg?h=8bc4aa39&itok=hH2zrePO" alt="test">
</picture>
Steps to reproduce
Enable and configure webp and avif
Get drupal to display a responsive image
Proposed resolution
I guess there are two approaches to this:
- Limit the file extensions that should be converted to exclude webp
- Detect if webp is enabled and act on that
Remaining tasks
- Figure out how to solve this
User interface changes
None
API changes
None
Data model changes
None