[[OGP]]には[[WebP]]を引き続き使うことを条件に、ファイル内の画像は[[AVIF]]にする。ネックだったコンバート速度が大きく改善され、[[macOS]]の[[Retinaディスプレイ]]対応により、ファイルサイズ削減の重要性が増したため。[[ImageMagick]]の `-quality` は `35` を推奨とする。 ## 経緯 以前に画像ファイルの[[AVIF]]化について提案したが、そのときは見送りになった。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" /> <span class="link-card-v2-site-name">Minerva</span> </div> <div class="link-card-v2-title"> 💿MIN-0037 画像ファイルにはAVIFを使う </div> <div class="link-card-v2-content">サイズの大きい画像にはコンバート時間に目をつぶってもコンバートする価値はあるが、一方でSlackなどのメジャーなツールで対応されていないければ、OGP画像が表示されなくなってしまい、ユーザーへ提供する価値が下がってしまう。そのリスクを払ってまでWebPから移行する価値はまだ無いとは判断した。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/minerva-adr3.webp" /> <a data-href="💿MIN-0037 画像ファイルにはAVIFを使う" class="internal-link"></a> </div> %%[[💿MIN-0037 画像ファイルにはAVIFを使う]]%% しかし、最近[[Obsidian]]の利用環境が[[Windows]]から[[macOS]]に変わったこともあり、以下の点で見直してもいいのではと思った。 - [[macOS]]だと[[Retinaディスプレイ]]の考慮が必要になり、画像サイズが従来の4倍になる - 今まで以上に圧縮が大事 - [[MacBook Pro M4 Pro]]になったことで[[AVIF]]のコンバート速度がネックでなくなっている可能性がある ## 提案内容 [[OGP]]以外の画像ファイルには[[AVIF]]を使う。 ## 検討内容 ### 前回のデメリットに対する状況 [[AVIF]]の有用性自体は前回の[[ADR]]で十分に証明されている。そのため、ここでは以前のデメリットについてフォーカスする。 - `前回` **コンバートに時間がかかる** - `前回` [[WebP]]と比較して50～100倍くらい遅く、FullHDの[[JPEG]]だと10秒くらい - 試しに実行してみたところ **[[WebP]]とほぼ同じ速度でコンバートできた** - [[ImageMagick]]を使用 - `前回` **[[Windows]]のファイルエクスプローラーや[[Slack]]などよく使うツールでプレビューが表示されない** - `前回` [[主要ブラウザ]]に対応したからと言ってこれらに対応済というわけではない - `前回` たとえば[[Slack]]の場合、[[Slack]]での[[OGP]]画像が表示されない - [[OGP]]について - **[[Slack]]は引き続き対応されていなかった** - **[[Bluesky]]も対応されていなかった** - 他は未確認だが、この2つがメインなので割愛 [[OGP]]対応以外の点では問題なさそうなため、**[[OGP]]は[[WebP]]のまま** という条件つきならば問題なさそう。 ### 画像サイズ比較 今回も一応やってみる。特にスクリーンショットについて。 | 形式 | 品質 | サイズ | | -------- | ---- | ------ | | [[PNG]] | - | 1.1MB | | [[WebP]] | - | 212KB | | [[AVIF]] | 50 | 132KB | | [[AVIF]] | 25 | 59KB | 画像サイズは `3602x2252`。[[MacBook Pro M4 Pro]]のほぼほぼフルサイズ。 [[WebP]]と[[AVIF]](品質:25)の画像を並べてみる。 ![[obsidian-editor-work.webp|frame]] *Webp* ![[obsidian-editor-work-25.avif|frame]] *AVIF(品質:25)* 流石に[[AVIF]](品質:25)の方が、周囲に色がにじみ出ていたりと若干の違いはあるが、実用面で言うとどちらも大差はない。言われなければ『これ `-quality 25` だよね』とは分からない。 ただ、`-quality 35` にすると `-quality 75` との違いがほぼなかったので、35にするのがよさそう。 ### 他 - [[Retinaディスプレイ]]を意識しなければいけないのは、主にスクリーンショットの場合 - それが[[OGP]]になることはほぼないので、カバー画像のサイズが増えるリスクは低い - [[OGP]]の画像は基本的に[[ChatGPT]]に作ってもらっているので1920x1080未満 - イラスト画像では[[Retinaディスプレイ]]による差分はそこまで顕著でない - 顕著なのは**文字**