<p>It was about time that new image formats appear for the web. I found out  about BPG completely by chance and it was a remarkable find! </p>
<p>BPG stands for “Better Portable Graphics” and it aims to replace JPG, PNG and GIF.</p>
<blockquote>BPG (Better Portable Graphics) is a new image format. Its purpose is to replace the JPEG image format when quality or file size is an issue. Its main advantages are:<br />
<br />
- High compression ratio. Files are much smaller than JPEG for similar quality<br />
- Supported by most Web browsers with a small Javascript decoder (gzipped size: 56 KB)<br />
- Based on a subset of the HEVC open video compression standard<br />
- Supports the same chroma formats as JPEG (grayscale, YCbCr 4:2:0, 4:2:2, 4:4:4) to reduce the losses during the conversion. An alpha channel is supported. The RGB, YCgCo and CMYK color spaces are also supported<br />
- Native support of 8 to 14 bits per channel for a higher dynamic range.<br />
- Lossless compression is supported.<br />
- Various metadata (such as EXIF, ICC profile, XMP) can be included.<br />
- Animation support.</blockquote>
<p>I have seen <a href="http://xooyoozoo.github.io/yolo-octo-bugfixes/#machu-picchu&amp;jpg=t&amp;bpg=t" rel="noopener">compression results</a> and they are simply <strong>amazing!</strong></p>
<h2>Compression</h2>
<p>http://i.imgur.com/3HhWwCP.jpg</p>
<p></p>
<p>http://i.imgur.com/Ex31Z9O.jpg</p>
<p>These images use highest possible compression and as you can see, while JPG is completely falling apart, BPG is quite usable. Especially in first example.</p>
<h2>Next stop — animations. </h2>
<p>Yes, BPG <a href="http://bellard.org/bpg/animation.html" rel="noopener">can do that</a> as well. Did I mention that both images and animations have 8-bit alpha channel (support for transparency)? </p>
<p>http://i.imgur.com/rPPDGPe.png</p>
<p>Obviously, animations won't work here,  but if you go to their <a href="http://bellard.org/bpg/animation.html" rel="noopener">animation page</a> you will witness this awesomeness for yourself. </p>
<p>Best part is — we  can already use some of this in our own creations. All we need is HTML5  capable browser and we can display these images and animations inside of CANVAS elements. You can find JS needed to display these  images embedded in example pages.Web is looking better each time I look at it :) </p>