A rather geeky/technical weblog, est. 2001, by Bramus
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" ); { …
Continue reading “Display a BlurHash using only CSS thanks to blurhash-to-css“
Jake and Surma tackle the age-old problem: what should you include in an image’s alt text?
react-blurhash react-blurhash allows you to easily integrate Blurhash Placeholder Images images in your React Projects: Blurhash component is the recommended way to render blurhashes in your React projects. It uses BlurhashCanvas and a wrapping div to scale the decoded image to your desired size. You may control the quality of the decoded image with resolutionX and …
Continue reading “Easily include Blurhash placeholders in your React projects with react-blurhash“
This message by Elaina Natario writing over at Thoughtbot cannot be repeated enough: While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative. Examples of both functional and editorial descriptions …
Surma digging into the oldskool dithering technique: I always loved the visual aesthetic of dithering but never knew how it’s done. So I did some research. This article may contain traces of nostaliga and none of Lena. Turns out there’s quite a lot to it 😅 Ditherpunk — The article I wish I had about …
squoosh-cli
To compress and compare images with different codecs right in your browser there’s squoosh.app that you can use. Announced at the still ongoing Chrome Dev Summit 2020 is Squoosh v2 with new codecs support (AVIF!), an updated design, and the release of CLI version! Squoosh CLI is an experimental way to run all the codecs …
Continue reading “Compress and Convert AVIF/WebP/PNG/etc images on the CLI with squoosh-cli“
If you’re dealing with images it’s quite common to show a small placeholder while the image is loading. You could go with grey placeholders, but a low-res blurred version of the original is preferred. That way you can, in the example use case of a website, use the Blur Up technique once the image is …
Continue reading “BlurHash — Low-res Blurred Placeholder Images Represented as Text”
New in Chromium 85 is support for the AV1 Image File Format (AVIF), which is pretty impressive: AVIF offers significant file size reduction for images compared with JPEG or WebP; ~50% savings compared to JPEG, and ~20% savings compared to WebP. 🦊 Using Firefox and can’t wait to use AVIF images? Set the image.avif.enabled flag …
Continue reading “How to embed AV1 Image File Format (AVIF) images”
loading-attribute-eagle-polyfill
Today, Rick Viscomi noted that some sites have set eagle – instead of eager – as the value for Native Image Lazy-Loading: Native image lazy loading landed months ago in Chrome 76. You can set img[loading] to auto, lazy, or eager. According to @HTTPArchive, 34 websites are setting it to loading="eagle" 🤔 There's a Lord …
Continue reading “Native Image Lazy-Loading: loading-attribute-eagle-polyfill“
To crop uploaded images, Twitter doesn’t simply cut them off starting from the center. After first having used Face Detection, they – in 2018 already – switched to AI to cleverly crop uploaded images. Previously, we used face detection to focus the view on the most prominent face we could find. While this is not …
Continue reading “Cleverly Cropping Images on Twitter using AI”