Menu
I know this is a new format for images, but I don't know how to show it in HTML.
Does anyone know how I can do that? Which browsers can show this image format besides chrome?
sample-webp-image.webp
901
Using WebP in HTML You can use a WebP image in a normal <img> tag, but in browsers that without WebP support the image would be broken. In the code above we have different image versions in both WebP and JPEG to support high-res displays with 2x pixel density as well as dark mode.
If you already use WebP images for your HTML <img> tags and want to enable WebP for the CSS background as well, the proper way is to use multiple backgrounds in the CSS styling. In this case, all browsers will get WebP images, except for ones that do not support WebP. They will load the . png image.
Starting with WordPress 5.8, you'll be able to use the WebP image format the same way as JPEG, PNG, and GIF formats. Just upload your images to your Media Library and include them in your content. As WordPress 5.8+ supports the WebP format by default, you don't have to install third-party plugins to upload WebP images.
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.
You use webp like any image:
<img src="img.webp" />
However since it's not always supported (see http://caniuse.com/#feat=webp), you can use this to set a fallback:
<picture>
<source srcset="img.webp" type="image/webp">
<source srcset="img.jpg" type="image/jpeg">
<img src="img.jpg">
</picture>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
