I’ve noticed this, too.
3 Likes
Interesting read! I recently convinced my manager to let me convert all of our images on our website from PNG/JPG to WebP… just in time for AVIF to become the newest standard. I considered doing it all over again for AVIF, but it seems it’ll have to be more of an intentional effort of picking images that would compress well with AVIF rather than converting everything.
I just convert everything: mainly because most of the images I use are JPEG, and AVIF still comes out smaller than the original PNG.
Very interesting! I’m not sure what the author means about alpha transparency in the problem image, though, since it should all be one layer? I’m sure the original source had transparency differences, but wouldn’t those all flatten down in the final screenshot?
I myself am really torn on image formats in general. I think it’s great that we’re coming up with new ways to compress images and still preserve legibility and details, since it helps make the web lower-powered, and that’s a big value of mine. But at the same time, I also value my site being able to display as much as possible in older browsers and software, since that helps extend the life of electronics. I know most people probably don’t share that goal, but that’s fine–I have a love for old hardware and systems, so that’s just something that’s important to me personally.
I know that the number of people viewing my site in obsolete systems is incredibly low, but I still want my images to show up for them anyway. For now, I just stick with PNG and JPEG, and chose the one that compresses the most while keeping detail. But I do wish there were a way to have the best of both worlds.
1 Like
With JPEG you’d be correct. But one of the features of PNG, aside from it being a lossless image compression algorithm, is that it preserves alpha transparency.
There is, and it’s standard HTML5: the <picture> element. I use it on my website all the time; here’s a SFW example:
<figure>
<picture>
<source srcset="./assets/images/picrew_2122621_wifey_20260712.avif" type="image/avif" />
<source srcset="./assets/images/picrew_2122621_wifey_20260712.webp" type="image/webp" />
<img src="./assets/images/picrew_2122621_wifey_20260712.png" width="600" height="600" alt="a manga-style image of a cute short-haired brunette with brown eyes" loading="lazy" />
</picture>
<figcaption>a portrait of <dfn lang="en" class="underline straight" title="My wife had asked me to refer to her by this alias on starbreaker.org.">Madam Catastrophy</dfn> generated with <a href=https://picrew.me/share?cd=eLfMOK6Ab8>Picrew’s “<i lang=jp class=straight>つつじメーカーβ</i>”</a></figcaption>
</figure>
Once you’ve put in the work to create the markup (which I automate with a m4 macro), the browser does the rest. If it supports AVIF, it will fetch that. Otherwise, it will fetch WebP if that’s supported. If all else fails, it will grab the original PNG or JPG.
No matter what, you get this:
2 Likes
Sweeeeet! I had a vague idea that there was a way to do this, but I hadn’t looked into it in a while. Swapping all the image tags out in my site to include the extras would take…a while, but I’m not averse to big, tedious projects like that honestly. Thank you for the explanation!
As for the PNG transparency issue, why would they not just flatten the whole thing down?!?!?! I guess that’s a matter of preference, or maybe on their original post they required the transparency for some reason, I don’t know. It just strikes me as a very complicated way to do what they’re trying to do. But, it’s probably due to some preference I don’t share, as their site is very different from mine!
You’re welcome. That’s one of the reasons we have this forum, isn’t it? To share knowledge instead of hoarding it?
2 Likes
Saving this as reference! I also vaguely knew you could have fallbacks for images but didn’t know the exact implementation
1 Like