PNG vs. SVG, Which is the Best in 2017?

I originally wrote this comparison article on my blog. I try to write as often as I can (although that isn’t as often as I’d like to), so I’d love for you to check out my other stuff. I usually write about Sketch/Adobe XD—that is—when I’m not working at SitePoint (I’m co-editor of design there!).

GIF, PNG, JPG, SVG, PDF…TIFF? Sooo many different file formats! But which file format should we be using in 2017? What’s the difference between PNG and SVG? What’s the difference between bitmap and vector? Can we use SVG in native apps? Can you convert PNG to SVG? Which file format should you use on the web? Where the hell does PDF fit into this? Let’s straighten out this malarkey right now!

Designing For the Web

HTML, the core programming language that’s used to build websites, supports JPG, PNG and SVG file formats. When a web browser loads a webpage, it loads all of the images as they arise — this means that file-size is a huge concern, as we don’t want our visitors waiting too long for images to load (especially on mobile devices).

JPG formats offer better image compression (i.e lower file-size), whereas PNG and SVG formats offer alpha-transparency (transparent backgrounds), so the first question is: does the image require a transparent background? If so, then PNG or SVG is definitely the way forward; otherwise, JPG. Now, here’s the hard question:

PNG or SVG?

PNG vs. SVG

One question that often comes up a lot, is:

“Do I need to design for high-resolution displays on the web?”.

Well, this question entirely depends on your visitors and whether or not they’re using high-resolution devices or not (they probably are), but for the sake of offering a definitive answer, you can cater for high-res displays if you wish, and yes, there are further concerns about website loading speeds, which I’ll address now.

When to use SVG

“So, do I export high-res images and scale down for normal-res screens?”.

Not exactly, no, as that would mean that normal-resolution devices would have to download high-resolution images unnecessarily. One option is choose SVG over PNG, which is a vector format that can scale to any size without losing quality, and it can do this while having a comparatively low file-size too. SVG is amazing like that.

“Cool, so let’s use SVG everywhere!”.

When to not use SVG

Woah, hold your horses cowboy! SVG has its limitations, like any other file format. SVG’s are calculated mathematically — this means that while shapes and colours are totally fine, bitmap artefacts (for example, photographic elements) will still not be scalable, and will still drive up the file-size. SVG is extremely versatile — it can contain both scalable vector artefacts and non-scalable bitmap artefacts.

Right, so, PNG or SVG, which is best?

You cannot convert PNG to SVG, so this is really important.

Here’s the rule: if we’re talking bitmap artefacts, you should export the image asset as PNG or JPG (PNG if you need transparency, JPG if not). If your image has vector artefacts that are easy to scale (shapes, flat/linear colours, etc), SVG is your format. Plus, SVG can be exported as code, meaning you can use CSS or JavaScript to edit the image dynamically, which is ideal for creating hover effects or subtle animations!

In Sketch you can do this by right-clicking on the object and selecting “Copy SVG Code” — this can quite literally be used in a coded website. Alternatively, if you know you won’t be manipulating the SVG image later on, you can simply hit the “Make Exportable” button in Sketch to export it as an image asset, as normal.

Exporting for multiple resolutions

“What happens when SVG doesn’t really make sense for me, but I need to cater for high-resolution screens and/or mobile devices?”.

Great question. Simple answer: you use PNG.

Right, now let’s explore the longer answer, which involves exporting multiple versions of the same image as PNG — one version for each resolution. If you’re interested in the HTML code that actually accomplishes this, this article about the new and trendy <picture> element in HTML should explain it thoroughly.

TL;DR…

With code, you can say, “hey, use [this] image for normal-res displays, but use [this] image for devices with a higher pixel density” — using the “2x” or “3x” string (in the code) will target Retina iPhones, for example. Image resolution isn’t a concern because the browser will download the version that’s optimised for that device.

Not too long ago (earlier this year, even) this concept was well out of reach, as the <picture> element had not been officially supported by web browsers; however, this is no longer the case, and in 2017, we can start to adopt its usage. Have a look at caniuse.com to see which browsers support the <picture> element properly.

For Native iOS and Android

TL;DR — PNG is king.

Right, native apps — it’s mostly the same concept, but there’s a vital difference in the way that native apps render images compared to web browsers. Native apps don’t download images on-the-fly like web browsers do, but rather the images are embedded into the app itself when the app is first downloaded. Since SVG has to be computed by the device, and PNG files are always ready-to-rock (already downloaded), PNG formats make much more sense for native apps.

Besides, native apps don’t really support SVG anyway. Native apps do support PDF files, which is also a vector format that can be exported from Sketch, but again, PNG is more energy-efficient, and additionally, like with web browsers, the device takes the PNG version optimised for the device’s resolution. Pretty smart, really.

Conclusion

Yeah, so that was quite a lot to take in, wasn’t it? Let’s summarise the different image formats + when to use them to help us take this information in:

  • PNG is usually the winner, especially for native apps
  • JPG enables compression when alpha-transparency isn’t required
  • SVG can also have a small file-size, but has technical limitations
  • PDF is supported by mobile OS’s, but is not recommended
  • GIF — no transparency, used for animated cat memes

Credit: the icons used in the post images were designed by Kokota


Originally published at blog.mrdaniels.ch.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.