-
Notifications
You must be signed in to change notification settings - Fork 102
Description
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:
thunderbird-website/sites/www.thunderbird.net/includes/base/page.html
Lines 129 to 133 in d6d2f25
| <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.)
![]() |
![]() |
|---|
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:
Lines 167 to 179 in d6d2f25
| # 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…


