JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<div>
<img src="https://www.qries.com/images/banner_logo.png"
      width="150" height="70">
</div>

JavaScript

var supportsWebP = true; //set this variable properly

for(i = 0; i < length; i++)
{
    var image = allImages[i];
    var pngSource = image.getAttribute('data-png-source');
    image.src = supportsWebP ? pngSource.replace('.png', '.webp') : pngSource;
}