How to serve a .JPG for browser that not support .webp in a proper way?

Question

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.

Cousingerman

I read some reference what reference, so we don't just double up on the information you've already researched – Ronnyronsard

See Also: Cross-browser Webp images support – Underthecounter

Answer 1

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');
 }

Verbal

Also, Internet Exploder will effectively just display the <img as it has no clue what to do with picture and source :p i.e. it won't "consider" anything :p – Ronnyronsard

True, Also Apple is typically resistant to supporting formats founded by rivals, so in ios devices, even chrome also can't help as it must use Safari engine. – Verbal

Answer 2

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

Detradetract

Can .htaccess server a jpg for iOS browser and webp for another browser that supported? – Cousingerman

It depends on browsers and RewriteCond %{HTTP_ACCEPT} image/webp condition will check the browser compatibility. When a browser makes a request, it includes a header to indicate to the server what the browser is capable of handling. In the case of WebP, the browser will send an Accept header containing image/webp. We will check if the browser sent that header using RewriteCond, which specifies the criteria that should be matched in order to carry out the RewriteRule. – Detradetract

Safari will never support WebP imho – Cousingerman

There are already hundreds of JPG images existing on server. Is there any way to convert these images in to .WebP format on server, or do we need to re-upload them? @VineshGoyal – Joinery

No, you don't need re-upload images, you can generate WEBP images from JPG with the help of PHP or NODE tools. try npmjs.com/package/gulp-webp @BhargavJoshi – Detradetract

@BhargavJoshi even though this is an old question, you can use ImageMagick for that purpose. – Caspar

Answer 3

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

Cruciate

Answer 4

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] 

Micronucleus

Answer 5

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

Rodge