Skip to content

[amp-img] Support media features or dark mode #40515

Description

@Eptagone

Description

Without AMP, a dark mode version of an image can be set via <source> like this:

<picture>
  <source srcset="/dark-image.png" media="(prefers-color-scheme: dark)" />
  <img src="/image.png" width="100" height="100" />
</picture>

However, the amp-img component doesn't seem to have an option like that right now.

Maybe it could work in a similar way to the fallback image:

<!-- Proposal -->
<amp-img alt="Image"
  width="100" height="100"
  src="/image.png"
>
  <amp-img alt="Image"
    dark
    width="100" height="100"
    src="/dark-image.png"
  ></amp-img>
</amp-img>

Alternatives Considered

Allow media to work like this:

<!-- Alternative proposal with media -->
<amp-img alt="Image"
  width="100" height="100"
  src="/image.png"
>
  <amp-img alt="Image"
    media="(prefers-color-scheme: dark)"
    width="100" height="100"
    src="/dark-image.png"
  ></amp-img>
</amp-img>

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions