まず結果から（スマホかタブレットで見た場合）
高画質版↓
通常バナー↓
綺麗になってるううううう
すごい！！！興奮！！！！
高画質版を作ろうと思ったキッカケ
個人サイトしてたら憧れる200px*40pxのバナー。
しかし時代も流れスマホが主流の今、「バナーって小さくてぼやけるな・・もったいないな」っていう気持ちが常にあったのですよね。
そこで出会ったのがレスポンシブバナー同盟さま
初見でこのバナーをスマホで見たとき、明らかにハッキリ綺麗なバナーが輝いて見えて、ついついクリックしてしまったのでした。
上記のサイトを参考にして自分のサイトのバナーも綺麗にしてみたので、以下でやり方を忘備録として残します。
作成方法（私の場合）
WordPressで使うことを前提としています。
静的HTMLでは使用可能だけど、WordPressだと使えないタグがありますので、それを削除したバージョンです（後述します）
素人がやってますので、もっといい方法があるかも。あくまで自己流です。
画像を用意
今回は最終的に、３倍の画像（bn@3x.avif）と、等倍の画像（bn.png）の２サイズを作ります。
まずはお絵かきソフト（今回はクリスタ）で、３倍の大きさの画像を作成します。
600px * 120px のpng画像を作りました。
1枚目はこれをこのサイズのまま保存します。（bn@3x.png）
→ そのあとの画像の圧縮へ進みます
2枚目は200px * 40pxの等倍サイズに変更して保存し（bn.png）、サイトにアップロードします。そのまま直リンク用として使用します。
2枚目はここで終わり。
画像を圧縮
1枚目の画像をSquooshというサイトで.avifに変換し、品質（Quality）を50%まで圧縮。これで６KBまで軽くなりました。
多少大きいサイズの画像も軽く、そして縮小しても高画質になります。
じゃあpng画像で同じように圧縮すればいいのでは？？と思って試してみたけど、ある程度の品質を保って圧縮すると６KBほど軽くはならないみたい。ここに.avifにする意味がひとつあるのですね（多分）
コード作成
<a title="8TH LIVE CIRCUIT" href="https://8th-livecircuit.com/"><img src="https://8th-livecircuit.com/bn@3x.avif" alt="8TH LIVE CIRCUIT" loading="lazy" width="200" height="40" /></a>
上記は当サイト用です。WordPressだとsrcsetタグが意図しない動きをするので削除しています。
※ srcset は、見る人の画面に合わせて「ちょうどいい画像」を自動で出し分ける仕組み
srcsetが使えれば、PCでは等倍画像、iPadでは２倍、iPhoneでは３倍・・・と画面に合わせて最適な画像を表示してくれてるけど、今回はどの画面でも３倍画像のみを表示しています。
これで完成！
実際に作ってみて
スマホで見ると本当に綺麗に表示されてテンションがあがる・・！
Retinaがなんたらとかsrcsetがなんたらとか、正直難しくて避けてたけど、バナーひとつだけでも頑張ってやってみると、それなりにいい感じになって最高です！
表示する環境によってタグの使い方が異なるので、気になった方はレスポンシブバナー同盟さまをご参照ください。すごく細かく書いてくださってます！
きれいなバナーの輪、広がれ〜〜〜〜
