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.