Menu
I am planning to use WebP on my E-Commerce website.It can boost a performance a lot based on Lighthouse test. But the problem is. we still have user that use iOS which does't have support for WebP format. I need more information about the proper way to deliver the images also how to let user download the images in JPG.
On my server. I have both formats for fallback purpose.
238
Webp is a image format developed by Google for web graphics, you can rename the file using file. jpeg naming to open it normally, this happens because there are many extensions like jpeg, png, bmp, webp, Google saves image in webp format because it was originally webp image not jpeg I guess.
Use "Save Image As PNG" Chrome extension Install the Save Image As PNG extension from Google Play Store. Right-click on the WEBP image and select the new option Save Image As PNG. That's it, now you can save the image in PNG format.
The easiest way to use picture element. The browser will consider each child element and choose the best match among them; if no matches are found, the URL of the element's src attribute is selected.
<picture>
<source srcset="/media/examples/surfer-240-200.webp" type="image/webp">
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>
EDIT:
As per Jaromanda's suggestion, we should look for fallback in img tag itself as internet explorer doesn't support picture element.
<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">
if we want to make sure that browser only downloads one file: a WebP or a fallback image; not both. We can use data-in attributes and assign the appropriate source based one browser support but in that we need to check for os/browser upfront.
<img data-jpg="image.jpg" data-webp="image.webp" id="myimg">
and in JS
let img = document.getElementById('myimg');
if(supportedBrowser){
img.src = img.getAttribute('data-webp');
}else{
img.src = img.getAttribute('data-jpg');
}
Another approach is to use webp-hero: WebP images are displayed also on browser that don't support them. With this method, JPEG images are generated on-the-fly, you don't have to hold your images in both formats on your server!
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="https://unpkg.com/[email protected]/dist-cjs/polyfills.js"></script>
<script src="https://unpkg.com/[email protected]/dist-cjs/webp-hero.bundle.js"></script>
<script>
var webpMachine = new webpHero.WebpMachine()
webpMachine.polyfillDocument()
</script>
</head>
<body>
This WebP image is also visible on Internet Explorer 10 and 11<br><br>
<IMG SRC="https://www.gstatic.com/webp/gallery/1.webp">
</body>
</html>
Live example: https://codepen.io/niente0/pen/dyvQQvO
20
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
