Skip to content

Add support for HTML5 <picture> tag #59

Description

@jan-san

The plugin currently processes <picture> tags incompletely.

For example, the following code:

<picture>
  <source srcset="img.png.webp" type="image/webp">
  <source srcset="img.png">
  <img src="img.png" srcset="img.png">
</picture>

...is transformed to:

<picture class="lazy lazy-hidden" data-lazy-type="image">
  <source data-lazy-srcset="img.png.webp" type="image/webp">
  <source data-lazy-srcset="img.png">
  <img data-lazy-src="img.png" class="lazy lazy-hidden" data-lazy-type="image" srcset="img.png">
</picture>

...which becomes the following after activation in the browser:

<picture class="lazy" data-lazy-type="image" src="null">
  <source data-lazy-srcset="img.png.webp" type="image/webp">
  <source data-lazy-srcset="img.png">
  <img data-lazy-src="img.png" class="lazy lazy-loaded" data-lazy-type="image" srcset="img.png" src="img.png">
</picture>

This essentially reduces the functionality of the <picture> tag to a basic <img>.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementtopic:frontendIssues related to the frontend codetopic:imgIssues related to the lazy loading of img tags

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions