別の記事でJavaScriptを使ってwebPを読み込むスクリプトを書きましたが、Webサイトの規模が大きく画像も沢山あると、HTMLも修正しなければいけないので、とても大変になります。
そんな場合にはJavaScriptを使って読み込む方が楽だと思います。
JavaScript : 画像をwebPにしてウェブサイトの読み込みを早くする
逆にこれからWebサイトを作るというのであれば、HTMLだけでも十分対応が可能です。
HTML : pictureタグ
<picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <source srcset="image.jpg" type="image/jpeg"> <img src="image.jpg" alt="Description"> </picture>
pictureタグを使うとブラウザの判定に合わせて読み込む画像を選択します。
上記の場合だと、avif,webp,jpgの順番に画像を登録してあるので、avifが表示できると判定した場合はavifが読み込まれ、avifが表示できないと判定されれば、次のwebpの判定をします。
pictureタグはメディアクエリも有効なので、PC用とスマホ用に画像を分けて登録しておくと、それぞれの環境に合わせた画像を読み込むので便利に使えると思います。