What are the different usecases of PNG vs GIF vs JPEG vs SVG

Question

When should certain image file types be used when building websites or interfaces  etc   What are their points of strength and weakness   I know that PNG  amp  GIF are lossless  while JPEG is lossy  But what is the main difference between PNG  amp  GIF  Why should I prefer one over the other  What is SVG and when should I use it   If you don t care about each and every pixel  should you always use JPEG since it s the  lightest  one

User · Answer

As pointed out by  aarjithn  that WebP is a codec for storing photographs   This is also a codec to store animations  animated image sequence   As of 2020  most mainstream browsers has out of the box support for it  compatibility table   Note for WIC a plugin is available   It has advantages over GIF because it is based on a video codec VP8 and has a broader color range than GIF  where GIF limits to 256 colors it expands it to 224   16777216 colors  still saving significant amount of space

User · Answer

As of 2018  we have several new formats  better support for previous formats and some clever hacks of using videos instead of images    For photographs   jpg - still the most widely supported image format   webp - New format from google  Good potential  though browser support is not great   For Icons and graphics  svg - whenever possible  It scales well in retina screens  editable in text editors and customisable via JS CSS if loaded in DOM   png - if it involves raster graphics  ie when created in photoshop   Supports transparency which is very essential in this use-case   For Animations  svg - plus css animations for vector graphics  All advantages of svg   power of css animations   gif - still the most widely supported animated image format   mp4 - if animated images are actually short video clips  Twitter   Whatsapp converts gifs to mp4   apng - decent browser support  i e  no IE  Edge   but creating it is not as straightforward as gifs   webp - close to using mp4  Poor support  This is a nice comparison of various animated image formats   Finally  whichever be the format  make sure to optimize it - There are tools for each format  eg SVGO  Guetzli  OptiPNG etc  and can save considerable bandwidth

User · Answer

There is a hack that can be done to use GIF images to show true color  One can prepare a GIF animation with 256 color paletted frames with 0 frame delay and set the animation to be shown only once  So  all frames could be shown at the same time  At the end  a true colored GIF image is rendered  Many software is capable of preparing such GIF images  However  the output file size is larger than a PNG file  It must be used if it is really necessary  Edit  As  mwfarnley mentioned  there might be hiccups  Still  there are still possible workarounds  One may see a working example here  The final rendered image looks like that  full-color-gif-image

User · Answer

GIF has 8 bit  256 color  palette where PNG as upto 24 bit color palette  So  PNG can support more color and of course the algorithm support compression

User · Answer

GIF is limited to 256 colors and do not support real transparency  You should use PNG instead of GIF because it offers better compression and features  PNG is great for small and simple images like logos  icons  etc   JPEG has better compression with complex images like photos

User · Answer

GIF based on a palette of 256 colours per image  at least in its basic incarnation   PNG can do  TrueColour   i e  16 7 Million colours out of the box  Lossless PNG compresses better than lossless GIFs  GIF can do  binary  transparency  0  opacity or 100  opacity   PNG can handle alpha transparencies    All in all  if you don t need to use Alpha-transparent images and support IE6  PNG is probably the better choice when you need pixel-perfect images for vector illustrations and such  JPG is unbeatable for photographs

User · Answer

If you opt for JPEG  and you re dealing with images for a website  you may want to consider the Google Guetzli perceptual encoder  which is freely available  In my experience  for a fixed quality Guetzli produces smaller files than standard JPEG encoding libraries  while maintaining full compatibility with the JPEG standard  so your images will have the same compatibility as common JPEG images    The only drawback is that Guetzli takes lot of time to encode   but this is done only once  when you prepare the image for the website  while the benefits remains forever  Smaller images will take less time to download  so your website speed will increase in the everyday use

User · Answer

I usually go with PNG  as it seems to have a few advantages over GIF  There used to be patent restrictions on GIF  but those have expired   GIFs are suitable for sharp-edged line art  such as logos  with a limited number of colors  This takes advantage of the format s lossless compression  which favors flat areas of uniform color with well defined edges  in contrast to JPEG  which favors smooth gradients and softer images    GIFs can be used for small animations and low-resolution film clips   In view of the general limitation on the GIF image palette to 256 colors  it is not usually used as a format for digital photography  Digital photographers use image file formats capable of reproducing a greater range of colors  such as TIFF  RAW or the lossy JPEG  which is more suitable for compressing photographs   The PNG format is a popular alternative to GIF images since it uses better compression techniques and does not have a limit of 256 colors  but PNGs do not support animations  The MNG and APNG formats  both derived from PNG  support animations  but are not widely used

User · Answer

You should be aware of a few key factors      First  there are two types of compression  Lossless and Lossy     Lossless means that the image is made smaller  but at no detriment to the quality   Lossy means the image is made  even  smaller  but at a detriment to the quality  If you saved an image in a Lossy format over and over  the image quality would get progressively worse and worse    There are also different colour depths  palettes   Indexed color and Direct color     Indexed means that the image can only store a limited number of colours  usually 256   controlled by the author  in something called a Color Map Direct means that you can store many thousands of colours that have not been directly chosen by the author     BMP - Lossless   Indexed and Direct    This is an old format  It is Lossless  no image data is lost on save  but there s also little to no compression at all  meaning saving as BMP results in VERY large file sizes  It can have palettes of both Indexed and Direct  but that s a small consolation  The file sizes are so unnecessarily large that nobody ever really uses this format   Good for  Nothing really  There isn t anything BMP excels at  or isn t done better by other formats       GIF - Lossless   Indexed only    GIF uses lossless compression  meaning that you can save the image over and over and never lose any data  The file sizes are much smaller than BMP  because good compression is actually used  but it can only store an Indexed palette  This means that for most use cases  there can only be a maximum of 256 different colours in the file  That sounds like quite a small amount  and it is   GIF images can also be animated and have transparency   Good for  Logos  line drawings  and other simple images that need to be small  Only really used for websites       JPEG - Lossy   Direct      JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won t notice  As a result it s a Lossy format  and saving the same file over and over will result in more data being lost over time  It has a palette of thousands of colours and so is great for photographs  but the lossy compression means it s bad for logos and line drawings  Not only will they look fuzzy  but such images will also have a larger file-size compared to GIFs   Good for  Photographs  Also  gradients       PNG-8 - Lossless   Indexed     PNG is a newer format  and PNG-8  the indexed version of PNG  is really a good replacement for GIFs  Sadly  however  it has a few drawbacks  Firstly it cannot support animation like GIF can  well it can  but only Firefox seems to support it  unlike GIF animation which is supported by every browser   Secondly it has some support issues with older browsers like IE6  Thirdly  important software like Photoshop have very poor implementation of the format   Damn you  Adobe   PNG-8 can only store 256 colours  like GIFs   Good for  The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency       PNG-24 - Lossless   Direct  PNG-24 is a great format that combines Lossless encoding with Direct color  thousands of colours  just like JPEG   It s very much like BMP in that regard  except that PNG actually compresses images  so it results in much smaller files  Unfortunately PNG-24 files will still be bigger than JPEGs  for photos   and GIFs PNG-8s  for logos and graphics   so you still need to consider if you really want to use one   Even though PNG-24s allow thousands of colours while having compression  they are not intended to replace JPEG images  A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image  with very little improvement in visible quality   Of course  this may be a desirable outcome if you re not concerned about filesize  and want to get the best quality image you can    Just like PNG-8  PNG-24 supports alpha-transparency  too     SVG - Lossless   Vector  A filetype that is currently growing in popularity is SVG  which is different than all the above in that it s a vector file format  the above are all raster   This means that it s actually comprised of lines and curves instead of pixels  When you zoom in on a vector image  you still see a curve or a line  When you zoom in on a raster image  you will see pixels   For example       This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at different sizes  It also means a small SVG logo can be used at a much larger  bigger  size without degradation in image quality -- something that would require a separate larger  in terms of filesize  file with raster formats   SVG file sizes are often tiny  even if they re visually very large  which is great  It s worth bearing in mind  however  that it does depend on the complexity of the shapes used  SVGs require more computing power than raster images because mathematical calculations are involved in drawing the curves and lines  If your logo is especially complicated it could slow down a user s computer  and even have a very large file size  It s important that you simplify your vector shapes as much as possible   Additionally  SVG files are written in XML  and so can be opened and edited in a text editor     This means its values can be manipulated on the fly  For example  you could use JavaScript to change the colour of an SVG icon on a website  much like you would some text  ie  no need for a second image   or even animate them   In all  they are best for simple flat shapes like logos or graphs   I hope that helps

User · Answer

JPEG will have poor quality around sharp edges etc  and for this reason it is unsuitable for most web graphics  It excels at photographs   Compared to GIF  PNG offers better compression  larger pallette and more features  including transparency  And it is lossless

User · Answer

JPEG is not the lightest for all kinds of images or even most   Corners and straight lines and plain  fills  blocks of solid color  will appear blurry or have artifacts in them depending on the compression level  It is a lossy format  and works best for photographs where you can t see artifacts clearly  Straight lines such as in drawings and comics and such  compress very nicely in PNG and it s lossless  GIF should only be used when you want transparency to work in IE6 or you want animation  GIF only supports a 256 color pallete but is also lossless   So basically here is a way to decide the image format    GIF if needs animation or transparency that works on IE6 note  PNG transparency works after IE6  JPEG if the image is a photograph   PNG if straight lines as in a comic or other drawing or if a wide color range is needed with transparency and IE6 is not a factor    And as commented  if you are unsure of what would qualify  try each format with different compression ratios and weigh the quality and size of the picture and choose which one you think is best  I am only giving rules of thumb

User · Answer

The main difference is GIF is patented and a bit more widely supported  PNG is an open specification and alpha transparency is not supported in IE6  Support was improved in IE7  but not completely fixed   As far as file sizes go  GIF has a smaller default color pallet  so they tend to be smaller file sizes at first glance  PNG files have a larger default pallet  however you can shrink their color pallet so that  when you do  they result in a smaller file size than GIF  The issue again is that this feature isn t as supported in Internet Explorer   Also  because PNGs can support alpha transparency  they re the only option if you want a variation of transparency other than binary transparency

User · Answer

png has a wider color pallete than gif and gif is properitary while png is not  gif can do animations  what normal-png cannot  png-transparency is only supported by browser roughly more recent than IE6  but there is a Javascript fix for that problem  Both support alpha transparency   In general I would say that you should use png for most webgraphics while using jpeg for photos  screenshots  or similiar because png compression does not work too good on thoose

[image] What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG?

Examples related to image

Examples related to svg

Examples related to png

Examples related to jpeg

Examples related to gif