PSA

This blog is X (formerly Twitter) free and images are now powered by AVIF in favor of WebP.

Background

No time no see, last English post was written back in November 2023. I was busy experimenting A LOT OF interesting stuff so had no time to finish several half-baked posts. That being said, I’ve been frequently updating my projects on GitHub, and I think this month I can find some time to write one post or two on data visualization using R package ggplot2. Some of the generated charts are really good, I promise.

Okay, spoiler aside, let’s move to the background.

No Xitter

I came across Nitter Shutting Down via HN (which leads to the comment from zedeus, the maintainer of Nitter) last month, and concluded that it’s time to say sayonara to Twitter, probably forever, thus removing all Twitter links from my blog soon™.

AVIF

From Can I use AVIF has 88.75% global usage as of Jan 2024, which should be considered well supported, with MSEdge 121 rolling out with AVIF support that month.

One of the major benefits is still file size. WebP can reduce file size significantly (with a slight color reduction) and AVIF can reduce WebP file size yet another time, significantly.

Also, with AV1 encoding in HEIF container, (quoted from MDN):

AVIF has potential to become the “next big thing” for sharing images in web content. It offers state-of-the-art features and performance, without the encumbrance of complicated licensing and patent royalties that have hampered comparable alternatives.

The How-To

Twitter

💡 Tip

Actually I can just use /search instead now with the help of pagefind.

Simply run a grep query would do the trick:

cd ~/path/to/repo/blog

# Show only filename (and path)
$ grep -Rl "twitter" content
content/posts/2023/06/piem.md

# Show matched content
# Use `R` for greedy match and `r` for lazy match
$ grep -R "twitter" content
content/posts/2023/06/piem.md:I\'ve been hunting for interesting stuff since I finished *Tears of the Kingdom* last month. This morning I discovered a prompt engineering battle between OpenAI and Anthropic (company behind *[Claude](https://www.anthropic.com/index/introducing-claude)*) on [Twitter](https://twitter.com/_jasonwei/status/1661781745015066624). What draw my attention is actually [one of the comments](https://twitter.com/vmuaddib/status/1661787034363604997):

That’s it. Now just remove the content.

AVIF

It’s a bit more complicated, but still rather easy if you use the right tool, somewhat like the Unix philosophy.

TL;DR: check the tmux screenshot below, it tells everything:

Conversion workflow in tmux at a glance

The long story:

1. Convert format
   • Batch convert using ImageMagick: mogrify -foramt avif ./*.webp
   • Image with odd resolution may cause a segmentfault, if so, use mogrify -resize to resize the WebP and then convert normal-resolution.webp normal-resolution.avif
2. Use nnn to fast check & delete (x, then y)
3. Quickly filter posts source file containing webp under blog/content (see #Twitter for explanation): grep -Rl "webp" . (do NOT miss the dot)
4. Start web service: hugo server
5. Use the lower right window in tmux screenshot to replace webp with avif
   • Batch (caution: would also replace words like webpage): sed -i 's/webp/avif/g' 20xx/0x/whatever.md
   • Manually: Open with vim 20xx/0x/whatever.md, then /webp, use n to jump to next match
6. Open browser, head to /archive, locate the post and preview the result (quick reference: Developer Tools -> Network -> Images -> Filter URL w/ avif)
7. Repeat 5-6 (and 1-3, if needed) until done
8. Check remaining WebP files in blog directory: rm -r public/* && find ./ -type f -name '*.webp'

Voilà, now you have potentially the next big thing (like #AVIF said) for media format!

Issues with AVIF

Not browser issue, no, they are fine, for me, to say the least.

However, many software are not prepared for it yet.

There is a test suite namely avif-sample-images. Those with odd width/height would often cause trouble.

I’m lazy, so let me just list software I tested:

• Not supported
  • NeeView: #1196, #1370
  • PowerToys: File Explorer, Image Resizer
  • Fossify Gallery: #56
  • My Android OEM OS
• Supported: ImageGlass, ImageMagick, Obsidian (and basically all Electron/CEF/EdgeWebView based software I guess) etc.