Skip to content

Allow <picture> & <source> tags within the description markdown #1505

@Ampflower

Description

@Ampflower

Is your suggested enhancement related to a problem? Please describe.

To be fair, this is a rather niche problem to given it's unlikely most uploaders will put in the effort to optimise in this fashion.

For those that would, this would allow the dev to send better optimised images while also gracefully falling back to older, heavier images. This also provides the benefit of overall bandwidth saving for end clients and involved servers.

Describe the solution you'd like

Allow <picture> and <source> to be usable akin to https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images.

This would allow one to give various pictures that'd be better compressed and/or higher quality while allowing for a fallback.

Realistically this may end up rarely used as the only use case is AVIF where MS-Edge doesn't support it, and JXL, where only Safari will support it out of box for the near future.

Describe alternatives you've considered

Using the broadest-supported format, which isn't particularly ideal if you're electing to host images off of your own server or domain, as such formats tend to be heavier for a given visual quality.

Additional context

As a practical example, we use the tags on https://pridecraft.gay/pridepack to allow the browser to load the smallest image in size possible, starting with Avif, then falling back to JXL then WebP, then (now) optionally to JPEG and PNG if desired.

An example of how it's implemented in HTML + Svelte if you'd like: https://github.com/Pridecraft-Studios/website/blob/main/src/lib/components/Picture.svelte

GitHub also tries to support it, as seen here: https://gist.github.com/Ampflower/83f4f84a8bca679cb46f0a486dbc5e36

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions