どうやらEdge 113 (2022-03-18現在は111)ではAVIFが表示できるようだ。WebPはスルーしてしまった(特にこれといった理由はない)が、AVIFは使いたい気分になっている。といってもAVIF一本で行くには早いので、まずはJPGをAVIFに変換し、img要素の手前にsource要素を追加し、両者をpicture要素で括るという作業を行う。
変換はNode.jsでスクリプトを書く。使い慣れているsharpパッケージを使う。オリジナルのJPG画像は残すので、読み込んで、拡張子を変えて保存するだけにする。sharpパッケージは既定で品質設定を50にしているようだ。
かなり前にimg要素の書き方を統一した。そのおかげでimgタグの変換は正規表現で事足りるので、VS Codeで雑に置換する。ついでに画像に張っていた画像へのリンクも削除する。古い記事を壊していそうだが、JSONのパースとHTMLのパースは通るようなので、壊れていないと信じている。
ファイルサイズとしては、最高で6.6%まで減り、最低でも77.8%、平均では38.9%という結果だ。極端な劣化は感じられない。JPG画像が多く参照されている記事を見ると結果がわかる。
このウェブログで使っていたPNGの画像は、可逆圧縮のAVIFに変換してもファイルサイズは減ったり(25%)増えたり(75%)だった。そのためPNGは維持している。単純な(のっぺりとした)画像だと増え、複雑な(グラデーションや影がある)画像だと減るような印象だが、細かくは見ていない。可逆圧縮だとWebPの方が安定して減るような比較記事もあり、AVIFだけという世界はまだ遠いようだ。
自ら書いたHTMLを信じていても、勝手に直ったりはしない。思い直し、全記事にオフラインで動作するバリデーターをかけて修正していく。関係ないところを直すだけで済んだため、壊さなかったことを確認できた。昔の僕を褒めよう。
使用したHTML-validateは推奨ルールが微妙で、集団的合意はとれそうもない。つまり利用にあたってルールを決めることになるが、間違いなく紛糾して決まらないだろう。オフラインで動作することと実用的な速度で動作すること以外には特に利点が見つからない。