392 private links
A deep dive into ASCII rendering.
It seems great but I don't have time for it.
Add a beautiful background to the screenshot
PNG renders top to bottom but the interlaced mode increase significantly the file size. WebP too at 28%.
AVIF has a progressive flag for it. It creates two layers. One at 1/8th resolution and minimum quality and one at full resolution and good quality. The first layer has 5.8kB as example, and the full image is 151kB. It's still experimental with avifenc.
JPEG XL (abbreviated JXL) renders on Chrome at 39% of the file.
The AVIF image provided as example is 56.4kB, which is incredible for a more than HD image.
For many images, there's little benefit to progressive rendering (the fox with many details is an exception). So progressive rendering is often a mix of good and bad luck.
The author claims JXL progressive rendering promises won't work, because there is a significant lag between each of the progressive rendering steps. It can work efficiently with srcset for example.
JXL still looks promising, but the AVIF progressive rendering of the fox is somewhat better than the 17-27kB alternative of JXL.
Note: a post-processed blur on a scaled down image results in 2kB. 10kB makes the image "acceptable" for the human eyes. The image is still pretty good for previews. The post-process blur would need to be part of the format, rather than left to something like CSS to make JXL.
and because it's an entirely separate image, the decoding overhead is zero if the browser doesn't see a benefit to displaying the preview. As in, in cases where the browser has the whole file, it can just skip the preview.
I will have to look after the AVIF format, because it seems to be the best of Webp (20-30% better compression), GIF (with animation) and better image quality than JPEG.
See the german wikipedia page or the english one
One way sighted people can determine what to put in alt text: Imagine you sent the post or article to a friend, and the image didn't load. What would someone need to know to get the equivalent experience and context? This will help you identify the important details.
An image gallery generator
oavif is a tool for target quality AVIF encoding using fssimu2, a fast perceptual image quality metric.
The project is hosted at https://github.com/gianni-rosato/oavif
An image fulgurator print on image or a custom view that is visible only to other cameras.
See https://juliusvonbismarck.com/bank/index.php/projects/image-fulgurator/2/
Make screenshot with a JS library.
It may be a way to bring back visual testing in UIs (or use it with Cypress or Playwright)
Instead of BlurHash that needs aditionnal JS for 83 bits string, some CSS snippets can do the work for Low Quality Image Placeholders (LQIP).
The big disadvantage of pure CSS approaches is that you typically litter your markup with lengthy inline styles or obnoxious data URLs.
A blurHash like method in CSS can also be used and that's what the author is describing.
A more simpler solution is to use one color as placeholder.
So why this one? Firstly, because it's not jam-packed with ads, and also because - apart from videos - conversions are made browser-side and not server-side.
Free profile pictures for your designs.
Pour lecture ultérieure