What the difference between a jpg, gif, png and svg?

This post can be viewed as a beginner's guide to the differences between a JPG, GIF, PNG, and SVG. Sometimes the differences in file formats are subtle and sometimes they are vast, but this brief explanation should give you a better understanding of each format and help you know when to use each them. 

We’ve talked about format differences between file formats in the past, but we are bringing another element to the discussion this time by adding SVGs or scalable vector graphics to the equation. Retina monitors and high-resolution displays bring an entirely new magnitude of importance to web design so it’s a good idea to compare SVGs to JPGs, PNGs, and GIFs and talk about the best use for each. Be sure your website and graphics designer is an expert at logo design branding and offers website services that will work for your needs. Let's start with definitions of each format:

JPG or JPEG: Joint Photographic Experts Group

A JPG is optimized for photographs. JPG works by getting rid of the things that the eye is not likely to see or notice. JPGs are lossy raster files which means they lose a small amount of information everytime the JPG is saved. JPGs work with compressing color so they are great for photographs and complex digital imagery. A high-resolution jpg is usually also suitable these days for printing with most print-on-demand companies. We are mostly discussing web use here, but there are a variety of file formats available for print. The reduction of file size results in the reduction of image quality.

GIF: Graphics Interchange Format

This bitmap format supports up to 8 bits per pixel which limits its color palette to 256. Not good for photographs an are mostly known these days for simply animated memes. GIFs are not huge players in the web design world. 

PNG: Portable Network Graphic

PNG was designed for use on the Internet and is the most largely used image compression format on the web. PNGs are not for printing professional graphic images. PNGs are raster graphics and were made as an improvement to the GIF. PNGs work well with line art images and photographs for websites but can result in really large file sizes. PNGs also offer alpha transparency which is very cool because each individual pixel has its own level of opacity. PNGs come in two types PNG-8 and PNG-24. PNG-8 means that the file has only 8 bits per pixel and the PNG-24 has 24 bits per pixel.

SVG: Scaleable Vector Graphic

SVGs are vector graphics that support animation and their behaviors are defined in XML files for they can be searched, indexed, scripted and compressed. Vector graphics are great for logos and line art because they aren't made from pixels and can be infinitely resized without losing quality or increasing in size. SVGs are your best option when creating icons and line art for high-resolution displays.

Best uses and differences chart

JPGGIFPNGSVG
Best UseDigital Images, photographySimple animationsTransparent images, icons, graphicsLogos, line art, icons, animations
CompressionGoodOkayGoodGreat
LosslessYesYesYesYes
High Res UseGoodNoOkayGreat
ColorMillions256PNG 8 - 256, PNG 24 - MillionsSky is the limit
TransparencyNoBinary*YesYes
PhotosBestNoGoodNo
IconsNoNoGoodBest
AnimationsNoSimpleNoSimple
LogoPrint and WebNeverWeb OnlyRetina Display and Mobile

*GIF Images are binary which means their transparency is either 100% invisible or 100% visible.

Visual comparisons

Seeing is often better when comparing file formats with colors and images. Below we will take a look at how logos, photographs, and complex icons look when side-by-side.

Logos

Winner: SVG - Loser: GIF

JPEG logo compressed 50% - 141 KB

JPEG logo with no compression - 643 KB

JPEG logo compressed 50%
JPEG logo with no compression

PNG-8 logo - 93 KB

PNG-24 logo - 10 KB

PNG 8 format logo example
PNG 24 format logo example

GIF logo - 9 KB

SVG logo - 3 KB

gif logo format example

Photographs

Winner: JPG photo with no compression - Loser: GIF. (SVG N/A)

JPEG photo compressed 50% - 114 KB

JPEG photo with no compression - 169 KB

Photo-jpg-low-compression
Red horse with long mane portrait against sunset sky

PNG-8 photo - 93 KB

PNG-24 photo - 266 KB

PNG-8-photo
PNG-24-photo

GIF photo - 116 KB

SVG logo

gif-photo

Not Applicable.

Icons

Winner: SVG - Loser: GIF

JPEG icon compressed 50% - 233 KB

JPEG icon with no compression - 665 KB

jpg half compression
Asset 1-100

PNG-8 Icon - 16 KB

PNG-24 Icon - 32 KB

PNG 8 Icon example
PNG 24 icon example

GIF Icons - 86 KB

SVG Icons - 6 KB

gif icon

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.