3 ms·

I don't have a solution, but you may find this of interest: I was snooping around on AirBnB with my network analyzer. (I like to quasi-reverse-engineer sites).

I don't have a solution, but you may find this of interest: I was snooping around on AirBnB with my network analyzer. (I like to quasi-reverse-engineer sites). I noticed that if you hit the site with Chrome/FF, you get served webp images; if you hit the site with IE, you get served JPEGs. It would be really great if there was an on-the-fly conversion library -- basically, reference the image once and let the run-time deliver up the right image type. What I don't like about that is that I generally shy away from doing any sort of "if then" based on browsers' user-agent-string.Edit/Update: I don't like that that because it got us all into a lot of trouble during the Browser Wars[0] and is now generally considered bad practice. [1] This might get me some downvotes... but hold my beer and watch this: I wonder if there is a javascript solution? Maybe you serve up the webp images, always, and write your own jquery plug-in that converts the webp to jpeg in memory and then writes it to an HTML5 canvas, but only if it's safari/IE? [0] https://youtu.be/yRkQOw1uRrw?t=164 https://youtu.be/yRkQOw1uRrw?t=164 [1] https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_de...

simcop2387 7y ago
I've never used it but there does appear to be something like that called webp-hero https://github.com/chase-moskal/webp-hero https://github.com/chase-moskal/webp-hero
johnday 7y ago
> What I don't like about that is that I generally shy away from doing any sort of "if then" based on browsers' user-agent-string. Can't you just base it on the "Accepts" header? That's the whole reason it exists, after all.
- social_quotient 7y ago
  I think this is the right answer and semantically better than parsing user agents, guessing, or other magic.
MildlySerious 7y ago
Wouldn't it be possible to combine the approaches? Say, using a <picture> tag where the webp is requested when supported, and if not a jpg is requested, which is generated from the webp on the backend.

simcop2387 7y ago

I've never used it but there does appear to be something like that called webp-hero https://github.com/chase-moskal/webp-hero https://github.com/chase-moskal/webp-hero

johnday 7y ago

> What I don't like about that is that I generally shy away from doing any sort of "if then" based on browsers' user-agent-string. Can't you just base it on the "Accepts" header? That's the whole reason it exists, after all.

social_quotient 7y ago
I think this is the right answer and semantically better than parsing user agents, guessing, or other magic.

MildlySerious 7y ago

Wouldn't it be possible to combine the approaches? Say, using a <picture> tag where the webp is requested when supported, and if not a jpg is requested, which is generated from the webp on the backend.