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.
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');
}
To serve WebP images with HTML elements, you can use <picture>
<picture>
<source srcset="path/to/img.webp" type="image/webp">
<img src="path/to/img.png">
</picture>
If have a large number of pages or too little time to edit HTML code, then Apache's mod_rewrite module can help us automate the process of serving .webp images to supporting browsers. Edit or create if the file doesn't exist .htaccess
odule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteCond %{DOCUMENT_ROOT}%1.webp -f
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
For more information click Here
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/webp-hero@0.0.0-dev.27/dist-cjs/polyfills.js"></script>
<script src="https://unpkg.com/webp-hero@0.0.0-dev.27/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
As a suggestion:
The redirect rule makes the browser to download both JPG and webp format, which I suppose is not intended. In order to avoid this, the last letter of the redirect rule shoulbe be changed from [R] - redirecto - to [L]
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,L]
I just made a custom helper method that is used exactly like the built in image_tag helper, but will fallback to png if webp is not supported by the browser.
def image_tag_dynamic(source, options = {})
options = options.symbolize_keys
filepath_webp = source + ".webp"
filepath_png = source + ".png"
content_tag :picture do
# the order of the <source> tags determines priority of image format. Browsers not supporting webp will default to png.
content_tag(:source, srcset: image_path(filepath_webp)) do end +
content_tag(:source, srcset: image_path(filepath_png)) do end +
image_tag(filepath_png, alt: options[:alt], title: options[:title], width: options[:width], height: options[:height], class: options[:clazz])
end
end