Grafik im avif-Format verwenden, wenn der Browser das unterstützt

Hallo Leute,

Ich habe eine Seite, in welche sich unter anderem der folgende Abschnitt befindet:

<div class="planet">
<img src="images/planet.png" alt="">
</div>

Diesen Abschnitt würde ich gerne durch folgenden ersetzen:

<picture>
  <source srcset="images/planet.avif" type="image/avif">
  <source srcset="images/planet.png">
  <img src="images/planet.png" alt="">
</picture>

Nun habe ich jedoch eine js-Datei, welche die folgende Zeile beinhaltet:

	$planet = $("div.planet>img");

wenn ich den oben genannten Abschnitt mit dem picture-Element einfüge, dann funktioniert meine Seite nicht mehr oder genauer gesagt das Bild Planet rotiert nicht mehr.
Es wird nämlich das folgende Skript verwendet:

function rotate() {
	$planet = $("div.planet>img");
	$planet.css({ 'transform' : 'rotate(' + degree + 'deg)'}); 
	$planet.css({ WebkitTransform : 'rotate(' + degree*2 + 'deg)'});
	$planet.css({ '-moz-transform' : 'rotate(' + degree + 'deg)'});
	$planet.css({ '-o-transform' : 'rotate(' + degree + 'deg)'});
	var timer = setTimeout(function() {
		degree-=0.1; 
		rotate();
	},10);
}

Wie muss ich denn die folgende Zeile abändern, damit der Browser das Bild im avif-Format verwendet, falls der Browser das avif-Format unterstützt und falls nicht, dass die png-Grafik genommen wird?

	$planet = $("div.planet>img");

Vielen Dank Jörg für deinen Ratschlag!

Funktioniert leider nicht.
Eine Fehlermeldung geben die Entwicklertools vom Google Chrome aber trotzdem nicht aus.

Macht nichts. Ist nicht so wichtig.

Dir noch einen schönen Tag