解像度とフォーマット対応状況の両方に配慮してWebP画像やAVIF画像を扱う

こんにちは、Webサイト作ってますか？ Webサイトを作っていると、Lighthouseスコアを上げるために画像のサイズやフォーマットにも気を配りたくなりますよね。 筆者は画像のフォーマットにはあまり頓着してこなかったので、「フラットな画像ならPNG」「込み入ったイラストはJPEG」「なんかWebPとかいうのもあるらしいけどよくわからん」くらいの解像度で適当に使っていました。しかし、最近の開発でLighthouseスコアのチューニングをしてみたところ、色々新しい知見が溜まったので、自分用の備忘録として残しておこうと思います。 3行まとめ ちゃんと複数の解像度の画像を用意しようね WebPやAVIFといった次世代フォーマットも使ってみようね <picture> と <source> は便利 画像のサイズを複数用意する 表示するディスプレイの解像度に合わせて、表示する画像の大きさを調整すること