7 ms·

The big story here is this introduces a new image file format without requiring you to upgrade a browser or download a plugin. Those aren't PNGs of representati

by pslam 12y ago

The big story here is this introduces a new image file format without requiring you to upgrade a browser or download a plugin. Those aren't PNGs of representative images you're looking at - that's BPG decoding happening in your browser. So we don't like HVEC due to patent worries? Fine, we can swap in another format and use the same technique. We don't have an I-frame format for Daala that's finalized yet? Fine, we can use work-in-progress. The format does not need to be finalized. If you update it, you rebuild your images and bundle a new JavaScript decoder. The ability to ship media along with a sandboxed, runnable decoder is awesome, and I'm surprised it hasn't caught on until now. I remember Google a while back implemented their own "video" codec in JavaScript using JPEGs and primitive inter-frame processing, exactly because there wasn't a universal video codec format they could use.

deleted 12y ago
[deleted]
sillysaurus3 12y ago
Problem is that you can't link to BPG images yet. Specifically, right click -> copy link location. If only the rightclick menu could be customized by JS. Adding only a limited number of entries to the menu seems like it'd be okay.
- rinon 12y ago
  With additional effort you can by including the proper JS. However, many sites would find this a benefit rather than a problem, since hotlinking takes away page-views.
- xanderjanz 12y ago
  You wouldn't really have to change the right click menu. You could put an invisible html div over top the images, and give them the correct link, instead of the raw decompressed image data. So a user would think they are right clicking the image, when really they are right clicking our overlay.
wmf 12y ago
Polyfills have been around for a while; this isn't the first one. e.g. http://webpjs.appspot.com/ http://webpjs.appspot.com/ http://badassjs.com/post/12035631618/broadway-an-h-264-decoder-in-javascript-running http://badassjs.com/post/12035631618/broadway-an-h-264-decod...
tambourine_man 12y ago
Isn't there hardware support for JPEG decoding on most mobile devices? If so, I imagine it couldn't compete performance and battery life wise. I remember Mozilla did a software video decoder once in JavaScript. Still, it is quite amazing.
- leeoniya 12y ago
  this will definitely need to be hardware-supported for decoding. on my phone, the decode time far exceeds the time it would take to serve up a bigger jpg file. the demos reminded me what browsing on dialup was like. in fact dialup was better cause at least the decoding/loading was progressive/incremental, which doesnt seem to be the case here. i assume it's just the way the decoder is implemented?
  - 0x0 12y ago
    Also unfortunately it seems to crash MobilrSafari something fierce when you start to zoom. :-/
  - vidarh 12y ago
    It just needs to be implemented natively. On the demo page the decoding is done in javascript.
  - dletozeun 12y ago
    A native implementation like the JPEG decoder would be fine. The bundled JS decoder implementation is elegant but not efficient on mobile platform (stalling here for seconds on iPad 3 / iOS 8 / chrome while JPEG ones are displayed instantaneously)
  - expr- 12y ago
    I decided to give it a try on a low-spec Android tablet, running latest version of Firefox. Got coloured horizontal stripes instead of a proper picture for every BPG example – and not just once; I was unable to view the images on the tablet. Not quite production-ready, I think.
    - 12y ago
keeperofdakeys 12y ago
Does the javascript decoder download the images, or does the browser do that, then the javascript simply decode it? If it downloads them itself, then any parallel fetching by browsers will stop working. And if they are decoded by javascript, they will take (very slightly) longer, and both the encoded and decoded images need to be held in memory both in javascript, and the browser. Are they decoded to .bmp, .jpg, .png? Can CSS reference them without javascript changing the styles? Can they be cached locally if downloaded directly? If you needed this for any page that loaded lots of images, all of the above would significantly increase page-load time, and memory usage. Especially on a mobile browser, it would use more resources (hence more battery), than otherwise. So personally I wouldn't like to see this be the future. Maybe just as a fall back, but detection for that might be a little hard.
- Cieplak 12y ago
  If you're curious how it works, untar http://bellard.org/bpg/libbpg-0.9.tar.gz http://bellard.org/bpg/libbpg-0.9.tar.gz and have a look at the post.js file.
  - akshatpradhan 12y ago
    I'm a designer, can't read code, and I'm trying to see if I should evangelize this at work. Its better if you could communicate with us non-technical folk and post an answer that the previous guy asked so that we other designers can also understand.
    - k__ 12y ago
      it waits till the page is loaded (window.onload) grabs all image urls of a page checks which have .bpg extensions replaces all these .bpg img tags with canvas tags loads all the images with Ajax and renders them into the canvas tags
    - unsigner 12y ago
      If you're a designer, and don't understand the issues involved, you probably should refrain from evangelizing sub-1.0 versioned products.
akshatpradhan 12y ago
If you want Designers to start using this, then we need a photoshop plugin, an illustrator plugin, a Sketch plugin, a pixelmator plugin. Make it easier for us to export images as a .BGP. If the images are truly smaller without affecting the current user experience of users using mostly modern web browsers, then we're more likely to pick up on using this.
- woah 12y ago
  This can all be handled by Gulp or Grunt and designers won't have to worry about it if someone on the team can code.
  - akshatpradhan 12y ago
    What if I use this: http://getbootstrap.com/examples/starter-template/ http://getbootstrap.com/examples/starter-template/ and add an img tag with a src to a .bgp? Will it render when I refresh the browser? I see that the BPG images are decoded in your browser with a small Javascript decoder. So a JS file is referenced in the HTML, and everything will run ok when I refresh? That's the promise?
    - 178 12y ago
      Yes.
- huuu 12y ago
  The server could encode it. So the designer can still upload a known format. The only problem I see for now is SEO. Ofcourse the title and alt attributes can give some context but the images wont get indexed
- SyneRyder 12y ago
  For the Photoshop file-format plugin, someone should contract out to Toby Thain at Telegraphics who has written a bunch of file format plugins. Or optionally use his GPL'd source code as a starting point if you want to DIY: http://www.telegraphics.com.au/sw/ http://www.telegraphics.com.au/sw/
billyhoffman 12y ago
Are you referring to this? Google Animated doodle with JPEG and opacity http://zoompf.com/blog/2012/04/how-do-google-animated-doodles-work http://zoompf.com/blog/2012/04/how-do-google-animated-doodle...

by pslam 12y ago

deleted 12y ago

[deleted]

sillysaurus3 12y ago

Problem is that you can't link to BPG images yet. Specifically, right click -> copy link location. If only the rightclick menu could be customized by JS. Adding only a limited number of entries to the menu seems like it'd be okay.

rinon 12y ago
With additional effort you can by including the proper JS. However, many sites would find this a benefit rather than a problem, since hotlinking takes away page-views.
xanderjanz 12y ago
You wouldn't really have to change the right click menu. You could put an invisible html div over top the images, and give them the correct link, instead of the raw decompressed image data. So a user would think they are right clicking the image, when really they are right clicking our overlay.

wmf 12y ago

Polyfills have been around for a while; this isn't the first one. e.g. http://webpjs.appspot.com/ http://webpjs.appspot.com/ http://badassjs.com/post/12035631618/broadway-an-h-264-decoder-in-javascript-running http://badassjs.com/post/12035631618/broadway-an-h-264-decod...

tambourine_man 12y ago

Isn't there hardware support for JPEG decoding on most mobile devices? If so, I imagine it couldn't compete performance and battery life wise. I remember Mozilla did a software video decoder once in JavaScript. Still, it is quite amazing.

leeoniya 12y ago
this will definitely need to be hardware-supported for decoding. on my phone, the decode time far exceeds the time it would take to serve up a bigger jpg file. the demos reminded me what browsing on dialup was like. in fact dialup was better cause at least the decoding/loading was progressive/incremental, which doesnt seem to be the case here. i assume it's just the way the decoder is implemented?
- 0x0 12y ago
  Also unfortunately it seems to crash MobilrSafari something fierce when you start to zoom. :-/
- vidarh 12y ago
  It just needs to be implemented natively. On the demo page the decoding is done in javascript.
- dletozeun 12y ago
  A native implementation like the JPEG decoder would be fine. The bundled JS decoder implementation is elegant but not efficient on mobile platform (stalling here for seconds on iPad 3 / iOS 8 / chrome while JPEG ones are displayed instantaneously)
- expr- 12y ago
  I decided to give it a try on a low-spec Android tablet, running latest version of Firefox. Got coloured horizontal stripes instead of a proper picture for every BPG example – and not just once; I was unable to view the images on the tablet. Not quite production-ready, I think.
  - 12y ago

keeperofdakeys 12y ago

Does the javascript decoder download the images, or does the browser do that, then the javascript simply decode it? If it downloads them itself, then any parallel fetching by browsers will stop working. And if they are decoded by javascript, they will take (very slightly) longer, and both the encoded and decoded images need to be held in memory both in javascript, and the browser. Are they decoded to .bmp, .jpg, .png? Can CSS reference them without javascript changing the styles? Can they be cached locally if downloaded directly? If you needed this for any page that loaded lots of images, all of the above would significantly increase page-load time, and memory usage. Especially on a mobile browser, it would use more resources (hence more battery), than otherwise. So personally I wouldn't like to see this be the future. Maybe just as a fall back, but detection for that might be a little hard.

Cieplak 12y ago
If you're curious how it works, untar http://bellard.org/bpg/libbpg-0.9.tar.gz http://bellard.org/bpg/libbpg-0.9.tar.gz and have a look at the post.js file.
- akshatpradhan 12y ago
  I'm a designer, can't read code, and I'm trying to see if I should evangelize this at work. Its better if you could communicate with us non-technical folk and post an answer that the previous guy asked so that we other designers can also understand.
  - k__ 12y ago
    it waits till the page is loaded (window.onload) grabs all image urls of a page checks which have .bpg extensions replaces all these .bpg img tags with canvas tags loads all the images with Ajax and renders them into the canvas tags
  - unsigner 12y ago
    If you're a designer, and don't understand the issues involved, you probably should refrain from evangelizing sub-1.0 versioned products.

akshatpradhan 12y ago

If you want Designers to start using this, then we need a photoshop plugin, an illustrator plugin, a Sketch plugin, a pixelmator plugin. Make it easier for us to export images as a .BGP. If the images are truly smaller without affecting the current user experience of users using mostly modern web browsers, then we're more likely to pick up on using this.

woah 12y ago
This can all be handled by Gulp or Grunt and designers won't have to worry about it if someone on the team can code.
- akshatpradhan 12y ago
  What if I use this: http://getbootstrap.com/examples/starter-template/ http://getbootstrap.com/examples/starter-template/ and add an img tag with a src to a .bgp? Will it render when I refresh the browser? I see that the BPG images are decoded in your browser with a small Javascript decoder. So a JS file is referenced in the HTML, and everything will run ok when I refresh? That's the promise?
  - 178 12y ago
    Yes.
huuu 12y ago
The server could encode it. So the designer can still upload a known format. The only problem I see for now is SEO. Ofcourse the title and alt attributes can give some context but the images wont get indexed
SyneRyder 12y ago
For the Photoshop file-format plugin, someone should contract out to Toby Thain at Telegraphics who has written a bunch of file format plugins. Or optionally use his GPL'd source code as a starting point if you want to DIY: http://www.telegraphics.com.au/sw/ http://www.telegraphics.com.au/sw/

billyhoffman 12y ago

Are you referring to this? Google Animated doodle with JPEG and opacity http://zoompf.com/blog/2012/04/how-do-google-animated-doodles-work http://zoompf.com/blog/2012/04/how-do-google-animated-doodle...