How to pull webp images?

Question

css

Hello. I'm using a ready-made gallp assembly with converting images to webp, but they are not displayed in the browser. They are actually in the files. Tell me, what could be the reason?
.

Answer 1

Webp files are inserted like normal pictures, but some browsers do not support this format, so you should use the special picture tag:

<picture>
    <source srcset="path/to/image.webp" type="image/webp">
    <img src="path/to/image.jpg" alt="Image alt">
</picture>

If webp is not displayed, there may be the following reasons:

• invalid file path. In the markup, there may be a path to the source folder, and not to the folder with the converted images;
  
• the browser does not support webp and needs a fallback as shown above;
  
• Something went wrong during conversion and the image is broken after conversion. It's unlikely, but it can happen nonetheless.