めちゃくちゃ重い！

オリジナル

<img src="image.png" />

Photo by Maksym Tymchyk on Unsplash

これが256色？

pngquant

<img src="image.png.quant.png" />

既存技術の複合技

JPEG+CSS mask

<img src="image.png.jpg" style="mask-image:url('image.png.alpha.png'); -webkit-mask-image:url('image.png.alpha.png'); mask-size:100%; -webkit-mask-size:100%;"> 

本命の次世代技術

Lossy WebP

<picture>
  <source type="image/webp" srcset="image.png.webp" />
  <img src="image.png" />
</picture>