In my HTML pages, I have a lot of Webp images that I can visualize only using Google Chrome. With other browsers like Mozilla, Explore, and Safari I can't see them.
Is there a solution? Maybe without change every image's extension (cause they are a lot)?
You need to fallback to a supported image format.
Below's example is using the <picture> element and the <source> elements with an img element fallback. The browser will try loading the assets inside the <picture> element from top to bottom until all the "conditions were satisfied" (optional sizes attribute and complex srcset which aren't in the below code) and the content format is supported.
<picture>
<source srcset='image.webp' type='image/webp'>
<source srcset='image.jpg' type="image/jpeg'>
<img src="image.jpg" alt="">
</picture>
When using the <source> element, setting the type attribute is not required as browsers should be able to infer the type from the file's extension.
The above verbose code can be reduced to a single <img> element with an srcset attribute:
<img src='image.webp' srcset='image.webp, image.jpg'>
You can use Modernizr's .no-webp class name to target non-support browsers and serve a non-webp format instead:
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}