Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

This Leaflet plugin adds the L.TileLayer.BPG class, a simple L.TileLayer subclass for .bpg-formatted tiles. It uses a javascript decoder for this image format. This is needed because browsers don't generally support the format natively (as of 2015). The original decoder provided by Fabrice Bellard is used.

Better Portable Graphics (BPG)

This is a compressed image format created by Fabrice Bellard in later 2014 as a "better JPEG". It supports lossless and lossy compression. However, due to the different nature of lossy-compression artifacts it seems to also do a good job in places where you'd normally use the lossless PNG format, such as with digital map tiles.

In my tests with OpenStreetMap tiles using a custom mapnik stylesheet, .bpg-compressed tiles gave me an average 50-60% space saving without noticeable image deterioration (bpgenc -q parameter between 28 - the default - and 32). Interestingly even at 90% space saving linear features and labels were readable, only small and low-contrast features had disappeared, yet no problems at tile boundaries.

Tiles bigger than 256x256 would probably work even better but at 512x512 a metatile of 8x8 becomes quite heavy.


Same as L.TileLayer, same constructor arguments, only add the .BPG suffix.

Would it be possible to instead modify the L.TileLayer class to transparently support .bpg? Probably.

Alternatively you can use my GitHub fork of libbpg which has an improved browser polyfill to transparently support .bpg image decoding -- this makes L.TileLayer work transparently but likely adds even more overhead than L.TileLayer.BPG already does by using the decoder written in JavaScript.


  • Canvas support in the browser.
  • The bpgdec.js file or one of its variants from libbpg. A version of bpgdec8.js is included with this plugin excluding the unneeded polyfill code.


<script type="application/javascript" src="leaflet.bpg/bpgdec.js"></script>
<script type="application/javascript" src="leaflet/dist/leaflet.js"></script>
<script type="application/javascript" src="leaflet.bpg/TileLayer.BPG.js"></script>
<script type="application/javascript"><![CDATA[
  function init() {
    new L.Map('mapcontainer').setView(new L.LatLng(52, 21), 16).addLayer(
      new L.TileLayer.BPG('/{z}/{x}/{y}.bpg', {
        maxZoom: 19,
        attribution: 'Data by <a href="">OpenStreetMap</a>',


TileLayer.BPG.js: 2-clause BSD.

bpgdec.js: BSD+LGPL-2.1 - see Licensing.


Leaflet TileLayer variant for .bpg tile format (leaflet plugin)






No releases published


No packages published