GIF, PNG, JPG or SVG. Which One To Use?

By Gabrielle Gosha , Jennifer Farley

If this article feels a little familiar, we published the first edition of it way back in 2009. While SVG has added a whole new dimension to web design, questions such as “What is the difference between JPEG and PNG?” are still as relevant as ever. We thought it was time to take a fresh look at the state of play in web-image formats.

Today’s short guide will give you the quick rundown of the various file types and where they work best. Enjoy.

JPG vs PNG vs GIF vs SVG – What is the Difference?

  Category Palette Use for
JPG Lossy Millions of colors Still Images
Photography
GIF Lossless Maximum 256 colors Simple animations
Graphics with flat colors
Graphics without gradients
PNG-8 Lossless Maximum 256 colors Similar to GIF
Better transparency but no animation
Great for icons
PNG-24 Lossless Unlimited colors Similar to PNG-8
Handles still images and transparency
SVG Vector/lossless Unlimited colors Graphics/logos for web
Retina/high-dpi screens

GIF: The Graphic Interchange Format

256 color palette.

256 color palette.

Unless you just stepped out of a faintly smoking DeLorean straight from 1985, you’re very likely already familiar with the web’s goofiest image format – the GIF (Graphics Interchange Format).

The GIF format is a type of bitmap, but unlike JPEG or PNG, GIF files are limited to a maximum palette of 256 colors. Essentially each GIF image contains a preset ‘box of crayons’ and there is no way to truly mix those colors to make new colors.

While 256 might sound like a lot of crayons to work with, complex photographs typically have many thousands of tones. This color range is lost during the GIF conversion process and this is the key reason not to use GIF for color photos.

While GIF is generally a poor choice for images with wide color variation, that 256 color limit can help keep file sizes small which is ideal for even the slowest of internet speeds. For many years, GIF provided the web’s only transparency option – though PNG and SVG now offer this too.

Category: Lossless

Choose GIF for:

  • Simple animations
  • Small icons
  • Graphics with low pixel-to-pixel variation (i.e. lots of flat color like logos and flags)

JPEG

Depending on your preference, you may refer to this format as either ‘JPEG’ or ‘JPG’ – both are accepted variations of the same acronym – Joint Photographic Experts Group.

Unlike GIF, JPEG is a 16-bit format, which means that it can blend red, blue and green light to display millions of color. This makes JPG very ‘photo-friendly’. This is partly why it is a standard format when it comes to most digital cameras on the market.

The JPEG format also allows you the flexibility to choose the how much you compress your image – from 0% (heavy compression) to 100% (no compression). Generally, a 60%-75% compression setting will shrink your file considerably while keeping your image looking decent on most screens.

While JPEG is well suited to compressing and rendering photography, it is a lossy compression type which means it’s less useful for ongoing editing of an image. Exporting a JPEG results in a loss of quality, and these losses get worse with each successive export – like a photocopy of a photocopy. This is why professional photographers generally shoot in lossless RAW format.

Also note that, unlike the GIF and PNG, JPEG can not preserve transparency.

Category: Lossy

Use JPEG for:

  • Still Images
  • Photography
  • Images with complex colors and dynamic
--ADVERTISEMENT--

PNG

A newer file format than GIF and JPEG, the PNG (Portable Network Graphics) is like a marriage between both the GIF and JPEG format thanks to its two variants.

PNG-8

PNG-8 is similar to GIF in many ways and uses the same 256 color palette (maximum). It has better transparency options and usually exports slightly smaller file sizes. However, PNG-8 has no animation function.

PNG-24

PNG-24 allows you to render images with millions of colors – much like JPEG – but also offers the ability to preserve transparency. Because PNG-24 is a lossless format file type, you are likely to get larger files, but if image quality is more important than file size, PNG-24 is your best option. Even so, services like TinyPNG.com can often make a big difference to your file size. Compared to their cousin JPEG, PNG-24 files are not as universally compatible with every app and platform which makes the format marginally less ideal for web sharing. However, it is capable of being edited without diminished qualities.

 

Category: Lossless

Use PNG for:

  • Web graphics that require transparency
  • Color heavy and complex photographs and graphics
  • Images that require re-editing and re-exporting

SVG

Unlike the three formats mentioned above, SVG (Scalable Vector Graphics) is not a pure bitmap format. Instead it is a vector format – a close cousin to Adobe Illustrator’s AI format and EPS – that is steadily becoming an attractive option for web and UI designers.

Sometimes it’s helpful to think of SVG as ‘HTML for illustrations’ and you need to think about it quite differently to other image formats we’ve listed.

SVG is best-suited to displaying logos, icons, maps, flags, charts, and other graphics created in vector graphics applications like Illustrator, Sketch, and Inkscape. Written in an XML-based markup, your SVG can be edited in any text editor and modified by JavaScript or CSS. As vectors can be scaled to any size while retaining crisp image quality, they are ideal for responsive design.

Though SVG is a vector format at its core, it is possible (even common) to embed bitmap graphics inside your SVG file – just as you might embed JPEGs in your HTML.

You can do this by either linking to an image source via its URL (as you might link to JPG in a webpage) or by encapsulating the pixel image as a Data URI. This gives SVG unchallenged flexibility and power.

Though SVG can help keep your images looking beautiful on the web, it isn’t necessarily a format that the everyday person can utilize to save and upload images via their website or social media platforms.

Online services like WordPress, Flickr, Medium, Tumblr, and Facebook will either forcibly convert your SVG to a format they like, or – more likely – outright block your SVG upload. There are a handful of SVG hosting options including svgur.com, imgh.us and even Github, as Alex demonstrated here.

As happy as I am to see smaller hosting services tackle SVG, Github is currently the only SVG-friendly service I’d be 99% confident will be around in 5 years. If you are using SVG to design for the web, you will find that you can almost always reduce file size when compared to something like the JPEG or PNG. But note that the more complex your SVG the larger the file will become.

Category: Vector/Lossless

Use SVG for:

  • Logos and icon with strong, geometric, vector-friendly design
  • Graphics that may need to be displayed in multiple sizes and screens
  • Graphics that respond to their device
  • Graphics that need to be edied, updated and redeployed.

Compare and Contrast

Now that we have covered the differences between popular file formats it is time to see them side by side. Below you will see how GIF, JPEG, PNG and SVG formats handle images with both simple and complex colors along with photographic images.

Flat Color Graphics

The first type of image we’re going to look at are flat color graphics. This covers most logos and branding, icons, simple maps, charts, and diagrams. The original image is a 23.4 KB PNG image with a 1280 x 1280 dimension.

Below you will be able to see the difference in compression size as well as image quality. Note the images were saved using Photoshop’s “Save for Web and Devices” option at the highest quality settings.

GIF: 17.6 KB

GIF

JPEG 100% (no compression): 53.3 KB

JPG

JPEG 75%: 33 KB

JPEG: 75% quality

PNG-8: 11.8 KB

enter image description here

PNG-24: 19.6 KB

enter image description here

SVG: 6 KB (as a pure vector graphic)

SVG In the case of this particular image, there isn’t much loss in quality when you compare the six formats – though you’ll notice slight artifacts near edges inside the compressed JPEG. This isn’t always true with flat color graphics, but in most cases, you should be fine with going with the least byte-heavy image. For this image, assuming we have the original vector file, SVG is the obvious choice at 6kb. If we don’t have the vector, the PNG-8 option is a decent fallback with our original image dropping from 23.4 KB to 11.8 KB.

Complex Color Images

The original image is a 328 KB JPEG image with a 1280 x 960 dimension. Below you will be able to see the difference in compression size as well as image quality. Note the images were saved using Photoshop’s “Save for Web and Devices” option at the highest quality settings.

As we don’t have access to a vector version of this file, any SVG version of this image would just be a JPEG embedded inside an SVG. This makes it a little redundant, so I won’t offer an SVG example here.

GIF: 426kb

GIF - 426kb

JPEG 100% (no compression): 776 KB

JPG 100

JPEG 75%: 215 KB

JPG-75: 215kg

PNG-8: 327 KB

PNG8 - 335kb

PNG-24: 1.7 MB

PNG-24: 1.7MB

Images that have complex colors tend to look better when using a JPEG, PNG-24 or SVG format. Colors are for the most part preserved and don’t have ugly banding and noise that you are likely to get with GIF and PNG-8 formats.

Color Photography

The original image is a 215 KB JPEG image with a 1280 x 701 dimension. Below you will be able to see the difference in compression size as well as image quality. Note the images were saved using Photoshop’s “Save for Web and Devices” option at the highest quality settings.

Again, there’s little to be gained with an SVG offering here.

GIF: 453 KB

GIF: 463kb

JPEG 100% (No compression): 410 KB

JPEG 100% : 419kb

JPEG 75% : 410 KB

JPG 75%: 105kb

PNG-8: 395 KB

PNG-8

PNG-24: 1.03 MB

PNG-24 1.2MB

As with complex images, your photographs are best to be saved under a JPEG, PNG-24 or SVG format. In the photo above, the color remains preserved in all formats aside from banding and noise that stand out in the shadows of the hair, skin, and background as well as at the top of photo as seen in the GIF and PNG-8 outputs.

Have a question about Photoshop? Why not ask it on our forums?

  • Sai Bharadwaj

    You’ve done it. Wonderful Article & Clean explanation baby.

  • dougoftheabaci

    Note: By some older browsers the author means IE6 and, to a lesser extent, IE7. IE6 has no support for PNGs. This can be fixed with a bit of javascript. IE7 has support for some PNGs. IE8, as far as I’m aware, supports all PNGs. Firefox, Safari, Chrome and Opera have supported PNGs for long enough that they are safe to use with those browsers.

    General rule of thumb is if you need to support IE6 and don’t want to use the JS hack you need to use GIFs and JPEGs. If you don’t mind using the hack or don’t care about IE6 use PNGs and JPEGs.

    It should also be noted that PNGs will be lower file size and higher quality than GIFs in most instances when properly compressed.

  • @dougoftheabaci
    Please don’t mislead people.

    IE6 supports PNG images. What it doesn’t support (and what the hacks are for) is alpha transparancy in PNG images.

    (BTW, the article appears to have forgotten mentioning alpha transparancy – with GIF each pixel can be completely or no transparent, and in PNG you can have transparancy between 0 and 100 percent)

    IE7 added support for alpha transparancy[1], but PNG image support was already there, since IE4 actually[2]. IE8 fixed a few bugs with PNG renderings (I think they were related to color profiles or gamma correction or something like that… I’m not sure), but it didn’t include additional “features” from PNG. Most PNG implementations treat(ed?) PNG images differently due to gamma correction issues [3].

    [1] http://en.wikipedia.org/wiki/IE7
    [2] http://en.wikipedia.org/wiki/Portable_Network_Graphics
    [3] http://hsivonen.iki.fi/png-gamma/

  • Angie at BlogCoach.org

    Fabulous, easy to understand explanation. Thanks so much!

  • I find that graphics with gradients and many colours can have a smaller file size in GIF format. I think that the distinguishing factor of whether a JPG should be used is whether the image is a photo or man made graphic. A straight gradient created in Photoshop does not have nearly as many colours as a natural gradient in a photo.

  • A few issues here

    “Portable Network Graphics (PNG) is a little bit like the best of both worlds. It was developed as an [missing word] to GIF…”

    More importantly, is there a reason that for each image for comparison of jpeg, gif and png are all displayed as PNGs on this page? That will alter any image results massively surely?

  • Anonymous

    Gradients for GIF are ok, so long as the gradient is vertical (ie made up of horizontal stripes). GIF uses run length encoding which roughly translates to “the next X pixels are Y colour”. That’s why it’s so bad at photos because the colour changes nearly every pixel. That’s also why a vertical gradient works ok, but a horizontal one doesn’t.

  • It’s also worth mentioning that the file size of PNGs can be reduced further still using PNG compression tools after being exported from the likes of Photoshop or Fireworks.

  • Bryan Price

    I find it interesting that as I scroll through the pigeon examples, I’m losing the detail of the background because it blurs into black. Move my head up (or down) and I see the full detail, but leave it at the top of the screen where I’m sitting, and it all goes black.

  • IE5.5 and above supports PNG-8. PNG-8 is very similar to GIF in that it only supports 256 colors and pixels are either transparent or not – they cannot be partially (alpha) transparent. In general, I find PNG-8 files sizes to be smaller than GIF for all but the smallest of graphics.

    IE also supports 24-bit PNGs. However, IE5.5 and 6.0 does not support alpha transparency unless you use a filter defined in CSS or JS. IE7 and 8 have native support.

    It’s probably worth mentioning that PNGs normally specify a gamma (gAMA) correction value that can make colors mismatch in some browsers – especially IE6. The best fix is to remove the gAMA value with TweakPNG or a similar tool.

  • PNG’s are great, though it’s important to use a PNG Fix for IE6 – see here http://labs.unitinteractive.com/unitpngfix.php

  • @Craig Buckler, PNG-8 can have partially transparent pixels! And multiple colors can be transparent, unlike GIF.

  • If I’ve chosen PNG for an image on the web, I like to use optipng to compress the PNG further. It usually saves a few KB, and every little bit helps :)

  • Flavio Curella.

    this article is misleading about the png-8 format.

    The format actually supports alpha transparency. IE6 will just not show any pixel with opacity < 100. Also, Photoshop can’t export PNG-8 with alpha, so people keep thinking it can’t be possible.

    I think nowadays is preferable to use png-8 with alpha transp. than using various iepngfix solutions:

    a) they are computable-heavy
    b) some of them are complex to deploy
    c) it’s just not worth it, given the current market share of IE6 (although YMMV).

    Usually jagged borders isn’t really that big deal (and I work for the graphic design industry)

  • Antonio Maggi

    Hey, thank you very much for the clarification! very clear

  • Mr. Toad

    Everyone just lost the game

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