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

javascript php html css webp

12,170

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

Solution 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

Solution 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

12,170

L.885

Hi, i'm a noobs in this programming world and still learning much mostly using Udemy Courses. I'm not young anymore so bear with me, I still have a big passion to become a good frontend & mobile developer that can serve a current market.

Updated on October 12, 2022

Comments

L.885 over 1 year

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.
- Jaromanda X over 5 years
  
  I read some reference what reference, so we don't just double up on the information you've already researched
Jaromanda X over 5 years

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
Narendra over 5 years

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.
L.885 over 5 years

Can .htaccess server a jpg for iOS browser and webp for another browser that supported?
Vinesh Goyal over 5 years

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.
L.885 over 5 years

Safari will never support WebP imho
Bhargav Joshi over 5 years

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
Vinesh Goyal over 5 years

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
Example person over 3 years

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