A rather geeky/technical weblog, est. 2001, by Bramus
To create presentations I like to use Keynote, mainly thanks to its animation feature. I admit that it took me some time to get accustomed to it – and that not all is perfect – but I think I’ve become efficient at using it over time. The transitions and animations – such as seen in …
Continue reading “Convert a Keynote presentation to a set of hi-res images”
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? →
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 …
Continue reading “Here’s a PNG that will show a different image in Apple Software”
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 …
Continue reading “Using Saliency in progressive JPEG XL images”
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 …
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 …
Continue reading “imgproxy: fast and secure on-the-fly image processing”
If you’ve ever wondered how the AVIF Image Format works, this detailed post has got you covered. Strap in tight, as we will start with some history and go deep into how modern codecs work, so this is not a quick read. Decoding AVIF: Deep dive with cats and imgproxy →
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 …
Continue reading “Why WebKit supports AVIF but Safari does not”
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 …
Continue reading “Seam carving: content-aware image resizing … in JavaScript”
