Greatly Reduce PNG Weight With This One Trick

Preface: In this article I'm assuming you're already familiar with SVG. If not, now's a great time to familiarise yourself! The power of SVG is truly amazing.

More than likely you've found yourself in this situation... You get handed a design, it's beautiful and full of color and images.

The designer then informs you that the hero banner has text that changes and so does the background color.

Here's what that hero banner may look like (though likely far better designed, but hey, it gets the point across):

Ok, no problem, that means we can't just use a background image and be done with it, we need to break the hero up into piece so portions of it can be dynamic.

Usually you'd reach to a PNG for the ice cream cone image. But, PNGs are usually pretty big, especially once we start catering to high DPI screens. Our ice cream as a PNG would clock in at a whopping 1.9mb! So instead, we're going to use a trick with SVG masks.

First, we're going to save our ice cream as a jpg. I'll use a black background in place of the transparency.

Next, we'll save another image as an 8-bit png to use as the mask image. Any part that is black will be invisible and any part that is white will be visible.

Those 2 images we'll then use together in our SVG like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin" version="1.1" viewBox="0 0 938 1912">
  <defs>
    <mask id="mask">
      <image width="938" height="1912" xlink:href="/images/ice-cream-mask.png"/>
    </mask>
  </defs>
  <image mask="url(#mask)" width="938" height="1912" xlink:href="/images/ice-cream.jpg"/>
</svg>

You can reference the images as seen in the code above or you can even inline them as base64 which you can see in this Codepen.

And there you have it. We've gone from a 1.9mb transparent PNG to roughly 309kb SVG without compromising quality or transparency. Pretty sweet, hey?

As always, happy coding! 🤓

It should be noted, I haven't tested all the browsers out there, but SVG support is now very wide spread so I wouldn't expect many issues. That said, if you've encountered any, let me know in the comments.

You can also use this great Codepen to help with your tests.