CODEWITHSUNDEEP
webp
ControlZ
ControlZ

Reputation: 181

Serving WebP Images to Visitors Using HTML Elements

Digital Ocean suggests the following format for webp images:

<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="Site Logo">
</picture>

In the example below I have applied a class to the jpg. Is it a good idea (or necessary) to apply the same class to the webp? How about adding the alt tag? Do webp images need an alt tag?

<picture>
<source srcset="images/pic.webp" type="image/webp">
<img src="images/pic.jpg" class="img-fluid" alt=""> 
</picture>

Upvotes: -1

Views: 285

Answers (1)

8ctopus
8ctopus

Reputation: 3237

I assume you are referring to this article.

While it's certainly possible to use the picture and source elements, there are reasons against it:

  • not supported by all browsers (although it will fall back to the inside img)
  • complexifies html code
  • requires rewriting of existing code

The alternative option is to use Apache’s mod_rewrite module to automate the process of serving .webp images to supporting browsers (also in the article). The advantages being:

  • supported by all browsers
  • simpler html
  • no need to rewrite existing code

Upvotes: 1

Related Questions