Heute bin ich über ein interessantes Thema gestolpert als ich auf Reddit unterwegs war. Die Idee ist so simpel wie genial, JPG Bilder durch SVG Masken transparent machen ohne auf schlechte PNG Kompression ausweichen zu müssen. PNG Bilder haben zwar eine gute Qualität, jedoch zählt im Web eher ein schnellerer Auftritt als minimal schönere Bilder. Von der Idee bis zum eigenen Test hats nicht lange gedauert, zum Test benutze ich ein Mockup eines iPhone Screenshots welchen ich vorletztes Jahr angefertigt habe.

Damit das funktioniert muss man jedoch zum JPG noch eine Maske für SVG anlegen. Eine einfache schwarz-weiß Interpretation reicht dafür aus, in meinem Fall ist sie nur 20 KB groß.

Anschließend kommt alles in ein SVG HTML Konstrukt.

<svg viewBox="0 0 1000 800" width="100%" height="100%">
  <defs>
    <mask id="iPhoneMask">
      <image width="813" height="1644" xlink:href="https://i.imgur.com/xm3HnrO.jpg"></image>
    </mask>
  </defs>
  <image mask="url(#iPhoneMask)" id="iPhone" width="813" height="1644" xlink:href="https://i.imgur.com/pL5AyGJ.jpg"></image>
</svg>

Und siehe da, ein transparenter Hintergrund. Alle Bilder habe ich noch mal in einem beschrifteten Imgur Album zusammengefast. Anschließend kommt man zum Schluss das JPG Bild (120 KB) + Maske (20 KB), also insgesamt 140 KB eine Erpsarnis von knapp 75% gegenüber dem 544 KB großen PNG Bild bringt. In meinem Fall würde sich es wahrscheinlich weniger lohnen jedoch wenn es um eine größere Anzahl an Bildern oder mit einer höheren Auflösung geht kann man nicht nur eine Menge Traffic einsparen sondern auch wichtige Millisekunden Ladezeit.
Anzumerken sei auch dass das ganze eher mäßig im Internet Explorer funktioniert, unter IE 8 sogar gar nicht.