A service-worker powered BPG to PNG converter
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app Remove unuseful logging May 25, 2015
.bowerrc v1.0.0 May 25, 2015
.gitignore v1.0.0 May 25, 2015
Gruntfile.js v1.0.0 May 25, 2015
README.md adding README May 25, 2015
bower.json v1.0.0 May 25, 2015
package.json updated package.json May 25, 2015

README.md

This library enable BPG support in the browser, it is based on ServiceWorker and it fallbacks nicely on unsupported browsers.

BPG Converter installs a ServiceWorker that enables the browser to transparently convert BPG images to PNG. Images encoded with BPG are super small while extremely detailed - visual comparison.

Demo

Launch the demo of BPG-Converter and check the DevTools, this is more or less what you'll see on the first access, when the ServiceWorker is still being activated:

First Load

Now reload the page, now the ServiceWorker is active and you'll see something like this

with ServiceWorker

The same image in BPG is just 15Kb, compared to 1Mb of the PNG counterpart!

Installing

  • Download the package using npm install bpg-converter --save
  • Create a worker.js file in the root of your project containing:
importScripts('node_modules/bpg-converter/app/dist/bpg-converter.js');
  • Register the Service Worker from your app using the following code:
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/worker.js', {scope: '/'});
}
  • Done! Have a look at the next session to learn how to properly setup the images.

How it works

Every time a request is issued for an image with extension .bpg.png the ServiceWorker intercepts the request and looks for the same image without the .png extension - so if the request is for someimage.bpg.png the server will receive an HTTP GET for someimage.bpg. It is important to have both the .bpg.png and the .bpg version on the server in order to be able to deal with browsers that does not support ServiceWorker or to serve images on first access, when the ServiceWorker is still not active.

Kudos