Server setup for webp images

[webm...@primalpictures.com]

We are having little luck getting webp images to serve from our server Microsoft-IIS/7.5 across all browsers
We are trying both the fallback to jpeg method and the decompress via javascript method for non supported browsers but currently haven't managed to get either solution to work.

This site details how to load them using javascript in Firefox etc. and seems to work
http://webpjs.appspot.com/

But when we try to use it, it just generates an "undefined" object and throws a 404 error.
Test example showing this error:
Javascript example

Then we have tried using a server side fallback method as outlined here:
http://www.stucox.com/blog/client-side-vs-server-side-detection-for-webp/

Also with no effect, although there are no clear details on exactly how to set it up, it seems to say you just need 2 versions of the file one jpg and one webp and then the server will chose which one to send.
There are no examples I've found so far that explain exactly how the html should be written to enable it so maybe I'm missing something?
It seems to be saying just request a webp image and if the browser can handle it the server will return it otherwise it will return the jpg of the same thing.

This test uses no javascript and both a webp and jpg version of the image is available to serve from the same place but it always serves the webp image regardless of the browser
Fallback example

At which point I'm a bit stuck.

We can use client side fallback, that is an option but I'd like to get these other options working to compare the pros and cons.
Is there any reason why both these other methods fail?

[Pascal Massimino]

Hi,

On Wed, Oct 19, 2016 at 11:40 AM, <webm...@primalpictures.com> wrote:

We are having little luck getting webp images to serve from our server Microsoft-IIS/7.5 across all browsers
We are trying both the fallback to jpeg method and the decompress via javascript method for non supported browsers but currently haven't managed to get either solution to work.

This site details how to load them using javascript in Firefox etc. and seems to work
http://webpjs.appspot.com/

But when we try to use it, it just generates an "undefined" object and throws a 404 error.
Test example showing this error:
Javascript example

fwiw, this page is displayed fine for me, using Chrome... 

Then we have tried using a server side fallback method as outlined here:
http://www.stucox.com/blog/client-side-vs-server-side-detection-for-webp/

Also with no effect, although there are no clear details on exactly how to set it up, it seems to say you just need 2 versions of the file one jpg and one webp and then the server will chose which one to send.
There are no examples I've found so far that explain exactly how the html should be written to enable it so maybe I'm missing something?

I'd say, the server should react to the content of the accept-header and send the jpg or webp accordingly.

 

hope it helps,

skal/

It seems to be saying just request a webp image and if the browser can handle it the server will return it otherwise it will return the jpg of the same thing.

This test uses no javascript and both a webp and jpg version of the image is available to serve from the same place but it always serves the webp image regardless of the browser
Fallback example

At which point I'm a bit stuck.

We can use client side fallback, that is an option but I'd like to get these other options working to compare the pros and cons.
Is there any reason why both these other methods fail?

--
You received this message because you are subscribed to the Google Groups "WebP Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webp-discuss+unsubscribe@webmproject.org.
To post to this group, send email to webp-d...@webmproject.org.
Visit this group at https://groups.google.com/a/webmproject.org/group/webp-discuss/.
For more options, visit https://groups.google.com/a/webmproject.org/d/optout.

[webm...@primalpictures.com]

Yes as mentioned the issue is with non supported browsers, not supported ones like Chrome. In Chrome it works fine unless we try and use the javascript decompression method then it too breaks.

And yes agree that the server should respond to the content of the accept header. Unfortunately it appears not to.
If someone has an example of it doing so that would be good to see as I not found one yet.

[webm...@primalpictures.com]

I should have also said the example that works in Chrome but not in Firefox detects if the browser supports Webp and only tries to use the javascript to decompress it if it doesn't, that why you see it working.
If we force it to use the javascript it fails everywhere.

[igri...@google.com]

On Wednesday, October 19, 2016 at 2:40:41 AM UTC-7, webm...@primalpictures.com wrote:

We are having little luck getting webp images to serve from our server Microsoft-IIS/7.5 across all browsers
We are trying both the fallback to jpeg method and the decompress via javascript method for non supported browsers but currently haven't managed to get either solution to work.

This site details how to load them using javascript in Firefox etc. and seems to work
http://webpjs.appspot.com/

FWIW, my understanding is that the JS decoder is *very* expensive and is probably not something you'd want to force on your users in production.. Serving a fallback variant is a better bet. 

 

Then we have tried using a server side fallback method as outlined here:
http://www.stucox.com/blog/client-side-vs-server-side-detection-for-webp/

Also with no effect, although there are no clear details on exactly how to set it up, it seems to say you just need 2 versions of the file one jpg and one webp and then the server will chose which one to send.

You'll need to add additional configuration to teach your server which file to serve. I haven't tested this code myself, but in theory, this IIS config should do the trick:

https://github.com/igrigorik/webp-detect/blob/master/iis.config

As an alternative, I'd encourage you to consider IISpeed: https://www.iispeed.com/ -- it'll do the detection, transcoding, etc, for you. Take a look at the docs.. 

Cheers.

ig