Create semi-transparent CSS background images by crossfading them with a transparent GIF

Nice work by Chris: when you crossfade an image — using the proprietary -webkit-cross-fade() — with a transparent gif, you can create semi-transparent background images. .el { background-image: -webkit-cross-fade( url(image.jpg), url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), /* transparent GIF, base64 encoded */ 50% ); Clever! WebKit/Chromium based browsers only though (i.e. no Firefox) Maybe there kinda is background-opacity? →

Here’s a PNG that will show a different image in Apple Software

This is wild: while writing his own parallel-decodable PNG implementation, David Buchanan discovered he had a bug in his code. Soon after, he found out Apple has the same bug in their implementation which ships with macOS and iOS. As a result, it’s possible to craft a PNG in such a way that Apple’s decoder …

Using Saliency in progressive JPEG XL images

At Google, they’ve worked out a new way to progressively enhance images: When delivering images over the web, it is now possible to organize the data in such a way that the most salient parts arrive first. Ideally you don’t even notice that some less salient parts have not yet arrived, because by the time …

Vector? Raster? Why Not Both!

Starting off with a 10.06MB SVG, Zach Leatherman tried several routes to reduce the weight of the hero image on the right side of the home page on JamStackConf.com. Eventually he settled on an approach where he layered a transparent WebP image on top of an SVG. Both layers were optimized individually, leaving only 78KB …

imgproxy: fast and secure on-the-fly image processing

In the previous post on AVIF, the folks at Evil Martians, also talked about imgproxy — their standalone server for resizing and converting remote images. It looks like a pretty amazing product, allowing you to run your own imgix-like service, warranting this separate post about it. imgproxy can be used to provide a fast and …

Why WebKit supports AVIF but Safari does not

Jon Henshaw, writing for Coywolf: WebKit added support for the AVIF image format in April 2021, but it’s still unavailable in Safari. Its absence is because Apple chose an unconventional method for decoding images in its browser. Long story short: Safari does not decode images using WebKit — its underlying rendering engine — but delegates …

Seam carving: content-aware image resizing … in JavaScript

Oleksii Trekhleb has implemented the Seam Carving algorithm in JavaScript. With this article I want to do three things: Provide you with an interactive content-aware resizer so that you could play around with resizing your own images Explain the idea behind the Seam Carving algorithm Explain the dynamic programming approach to implement the algorithm (we’ll …

Display a BlurHash using only CSS thanks to blurhash-to-css

If you want to display Blurhash Placeholder Images on your site you need a JavaScript solution to do so. The blurhash-to-css package bypasses that, as it allows you to convert a Blurhash to a set of CSS properties that need to apply. import { blurhashToCss } from "blurhash-to-css"; const css = blurhashToCss( "eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU" ); { …