Search code examples
phphtmlcssasp.netwebp

Can I just use <img> tag src and alt to serve WebP files vs using <picture>?

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?

Solution

  • 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