Can I just use tag src and alt to serve WebP files vs using ?

I’m in the process of converting images in my website to WebP image format. If the system is unable to serve the file, it will use the PNG version. I specify both WebP and PNG format in the ‘src’ and ‘alt’ element of ‘img’ as follow:

<img class="d-flex d-lg-flex" 
 src="/assets/img/bytebixlogo.png.webp?h=757c7b444ce465289d079f63b22bbca0" 
 alt="/assets/img/bytebixlogo.png?h=82cf7689d1dee6b6948666e42d5e364d">

But in some websites, i see the following complex implementation:

<picture>
    <source data-lazy-srcset="https://openplant.b-cdn.net/wp-content/webp-express/webp-images/doc- 
        root/wp-content/uploads/OpenPlantLogo_TransparentBG.png.webp" type="image/webp" 
        srcset="https://openplant.b-cdn.net/wp-content/webp-express/webp-images/doc-root/wp- 
        content/uploads/OpenPlantLogo_TransparentBG.png.webp">
    <img id="image-4125-897" alt="" src="https://openplant.b-cdn.net/wp 
        content/uploads/OpenPlantLogo_TransparentBG.png" class="ct-image webpexpress-processed lazyloaded" data-lazy-src="https://openplant.b-cdn.net/wp- 
        content/uploads/OpenPlantLogo_TransparentBG.png" data-was-processed="true">
    <noscript>
    <img id="image-4125-897" alt="" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="ct-image op-logo-image animated fadeInUp webpexpress-processed" data-lazy-src="https://openplant.b-cdn.net/wp-content/uploads/OpenPlantLogo_TransparentBG.png">
    </noscript>
</picture>

Is there something i’m missing?
And why is this complex implmentation of WebP is used?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The alt attribute in <img> tag is for an alternative text to show to browser when the image is not available. You can take a look at the description here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes

So, putting an image path in the alt attribute won’t get you what you want. When the PNG image is not available, browsers will simply display the path as plain text.

The <picture> tag is to solve the shortcomings of alt so you can have another image as a fallback. You can have multiple fallback / situational replacement with it. Since it is designed to be much more powerful and versatile, the syntax looks more complicated.

With more power, comes more responsibilities 🙂

More details about <picture> tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0