Skip to content

AVIF/WebP images need type attribute for older browser fallbacks #842

@janbrasna

Description

@janbrasna

Safari has been known to be dumb about image formats to pick from when deciding support/fallback, so to stop it from insisting on using formats it doesn't understand (esp. pre-Ventura/iOS17) the type attribute helps it to pick a suitable format.

While there are a lot of working images, I also see a lot of broken ones randomly checking in Safari 15 — and it seems to correlate with the markup used in the occurrences:

This one works:

<picture>
<source srcset="{{ static('img/thunderbird/new/phone/cta-phone.avif') }}" type="image/avif">
<source srcset="{{ static('img/thunderbird/new/phone/cta-phone.webp') }}" type="image/webp">
<img src="{{ static('img/thunderbird/new/phone/cta-phone.png') }}" alt="{{_('smartphone')}}">
</picture>

This one renders broken ("missing") images:

{{ high_res_img('/media/img/thunderbird/base/home/exploding-phone.png', {'alt': _('A rendering of a mobile phone.')}, alt_formats=('avif', 'webp')) }}

(confirmed by inspecting the images and checking for presence/absence of the type attributes.)

product

about feature

It would seem that monkey-patching a (faux-)MIME type invented from the alt_format passed to high_res_image() helper could be added to the element as a type:

# If we've specified some alternate formats we need to use the <picture> tag instead
if alt_formats:
tags = ["<picture>"]
for alt_format in alt_formats:
alt_url = f"{url.rsplit('.', maxsplit=1)[0]}.{alt_format}"
alt_high_res_url = f"{url_high_res.rsplit('.', maxsplit=1)[0]}.{alt_format}"
tags.append(
'<source src="{url}" srcset="{url_high_res} {scale}"/>'.format(
url=alt_url, url_high_res=alt_high_res_url, scale=scale
)
)

as a quick fix, if accepting that any alt_format "quux" would emit type="image/quux" just blindly…

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions