AVIF/WebP images need type attribute for older browser fallbacks

[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:

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:

thunderbird-website/sites/www.thunderbird.net/index.html

Line 353 in d6d2f25

{{ 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:

thunderbird-website/helper.py

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…

[MelissaAutumn]

Thanks for the report! Yeah I'm not sure why I missed the type on those source tags. Since alt_formats accept extensions blindly, I don't see a problem with using type/<alt_format>

[janbrasna]

(Ah, this could be a little unhappy if fed with with .svg as the faux image/svg is just plain wrong, needing image/svg+xml there… still thinking. Maybe only adding the type explicitly if the alt asset requested is "avif" or "webp"…?)

[MelissaAutumn]

Yeah sounds good to me, thanks for looking into it!

We normally use the svg helper for svgs, but that may change too with #836. 😅

[janbrasna]

Actually the high res helper literally does <source src="file.ext" srcset="file-high-res.alt scale.x" and that's not something folks should feed SVGs to, so I'm just adding the type blindly for now in #958