Jw on Mastodon recently sent me a post reporting that images on my website are “dead”. That didn’t sound right at all, so I asked him for a URL so I could check.
They sent me a screenshot from their phone of my post on Mastodon preview cards.
They’ve recently started blogging and claim to be non-technical. So they didn’t know what was going on, but I did as soon as I saw the screenshot.
The “missing” image is marked up using the
<picture> element because I want to provide WEBP and
AVIF images to compatible browsers instead of JPEG and PNG to reduce
page sizes. This is implemented as a HTML partial that I pull in with
hxincl. When <picture> isn’t supported,
the element also contains a <img> element as a
fallback.
The second image in the screenshot, the one that actually rendered,
is a plain <img> tag inside a
<figure> element that pandoc generated
from raw markdown. I was being lazy, but also wanted to directly
reference the image I provide for all social media preview cards on this
site.
So, what happened? Jw is using a content blocker with Safari on iOS
that blocks the <picture> element, but not
<image>. He had said it was “Safari’s content
blocker”, so I’m going to blame Apple for now, either for doing a
half-assed job on their own code or for doing a half-assed job reviewing
some other clown’s code. It would be nice if whoever implemented this
content blocker was consistent about blocking images.
If you’re going to block multimedia elements to protect the user or reduce data use, here’s what you should be blocking:
<picture><img><video><audio><canvas><script>
Also, if you’re going to block images, at least display their alt tags when a website operator has bothered to provide them. That’s what they’re for, dammit.
Incidentally, I know that blocking <canvas> and
<script> will break a lot of web applications. I
don’t get paid enough to care about applications that depend on
JavaScript because their developers don’t understand basic concepts like
progressive enhancement. JavaScript should be
optional, to be used when available. When it isn’t, you should
be using standard HTML forms and sending data with HTTP GET and POST
methods, and doing your form validation server-side, even if it means
doing full-page refreshes.
But that isn’t fashionable or trendy or sexy. I know. I’m still not getting paid to care. If your web app doesn’t work in Lynx then it doesn’t fuckin’ work. Case closed.
Oh, and, Apple (or whoever is responsible for this half-assed content blocker)? Fix your shit before somebody gets hurt instead of inconvenienced. It can’t be that hard. Hell, if you offer me a decent 1099 contract rate I’ll do it myself.