Design & UX
Article

Can SVG Save You from Your Fat PNG-32s?

By Alex Walker

Nightmares: When Internet Explorer couldn’t handle PNGs properly.

If you've been around long enough (i.e. early 2000's), you'll remember a time when all we longed for was decent PNG-32 support.

While PNG-32 had much better transparency support than garden-variety GIF, Internet Explorer rendered the transparent parts as a dirty dishwater gray. As IE6 ruled 90% of the browser market, this was heart-breaking.

Understandably, people gnashed their teeth and spent their nights devising ludicrous IE hacks using JavaScript and obscure Microsoft filters.

Yes, we had much better things to complain about in those days, my friends!

So when the time came that we could finally rely on PNG-32 support, we were all so happy that we've barely looked at PNG closely since.

PNG – The bit that sucks…

As nice as PNG-32 transparency is, there has always been a price to pay for it. Large PNGs are big files – usually 4 to 5 times the equivalent JPEG.

JPEG version: 30.5 kb

This JPEG weighs in at just over 30kb

PNG version : 135kb

The same image as a PNG ticks over 135kb

But if we needed high-quality alpha transparency, we had to suck it up, right?

There's also no flexibility with PNG-32. Where JPEG lets you select the most effective compression, PNG takes a 'like it or lump it' approach.

Where does SVG come into it?

SVG has two abilities that help us out here.

  1. Because SVG is a document format (like HTML), we can embed other file formats (such as JPEGs) inside our SVG. This is explained here if you're interested, but you don't need to understand this.
  2. SVG also supports filters that allow you create an alpha channel (transparency mask) – not unlike those in Photoshop. For the image above we would need a mask something like this one.
Alpha channel

Alpha channel

So, if we were to combine these two SVG 'super powers', we could theoretically create a new super-efficient image file format with luscious 32-bit transparency.

But is it worth the effort?

Meet ZorroSVG

ZorroSVG - Put a Mask on it

Luckily for us, Mario Klingemann (@Quasimondo) built ZorroSVG to take most of the hard work out it for us.

Simply drag your chunky transparent PNG32s straight into ZorroSVG, choose the JPEG quality/compression setting, and you'll receive a shiny new transparent SVG that should work in almost any modern browser.

It's crazy easy.

As a test-drive, I took the original 878kb PNG-24 image above and threw it at ZorroSVG with the quality set at 80%.

The new SVG weights in 183kB – that's 21% of the original size.

Here's a CodePen showing that SVG in action.

Screen cap of the Codepen example

It's a cool concept and it might provide a nice jumping-off point for some other ideas. More on that next week.

  • http://onsman.com/ ronsman

    That is excellent – both the logic and the means to do it. Thanks, Alex.

  • xphpdev

    Is it scalable? Usable for responsive sites?

    • http://oligofren.wordpress.com Carl-Erik Kopseng

      What do you mean by scalable? If you design responsive sites you pick differently sized pictures.

    • Amith

      Yes the svg scales as per the browser dimension.

    • http://sitepoint.com Alex Walker

      Pixels are pixels, so we only have the pixels that were present in the original JPEG. But sure, it scales those pixels fine. Arguably it also may be more acceptable to send a higher-res JPEG to a smaller device if the file size is less less than the equivalent PNG.

      For instance, if a 2000px wide SVG/JPEG was still smaller than the 800px wide mobile-optimized PNG-32 you were going to send, maybe you don’t need multiple versions of the same image?

  • http://sitepoint.com Alex Walker

    @kamlesh_bisht:disqus Yes, that’s not the kind of image that will do well with this kind of technique – icons, flat graphics, UI elements etc, with flat tones and low detail. JPEG will never be great with these types of graphics, even forgetting about the transparency

    The way JPEG works – with a patchwork blanket of compression zones – you begin to see a checkerboard effect the more you turn the compression up. That’s what you’re seeing here:

    http://i42.tinypic.com/302yjdg.png

    In clean UI graphics, that becomes obvious with not much compression.

    PNG8 is much better suited to this type of graphic – I got a graphic like yours’ down to 3.5kb here: https://i.sli.mg/QDCnKl.png

    • Kamlesh Bisht

      Ok, Got it, Thanks.

  • tomsabin

    I’m sure this will be useful in certain cases, but using PNG-8 instead of PNG-32 removes this ‘like it or lump it’. Instead it allows you to compress the image a similar way you can compress GIFs.

    Taking the PNG-32 sample (which is 136 KB when downloaded) and exporting it as PNG-8, using 32 colours, results in a 33 KB file. Comparable to the 35 KB JPG sample that I also downloaded as a comparison.

    Obviously it’ll depend on the image itself, but for this B&W example, the easiest way is actually just to use PNG-8 instead. Totally dependent on how much compression you can get away with before you notice loss of quality.

  • waspoza

    Hmmm, looks like jpeg inside this svg is base64 encoded, which means is about 30% larger than original. It’s not possible to insert binaries into svg?

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.