From the session “Images 101: File Types, Web Optimization, Retina Screens, oh my” (https://2016.badcamp.net/session/images-101-file-types-web-optimization-retina-screens-oh-my) by Jessica Tate (http://www.jessicatate.com/).
Overview and JPEG
I found this session very helpful in understanding how to prepare images for web use. I learned that while JPEG images are ubiquitous they should only be used as the final image export. They can contain millions of different colors while maintaining a smaller footprint. What this means is you can keep the image tiny for websites but at the same time keep the colors looking great. The reason Jessica said that you should use JPEG as your main source is that every time you run a save command in a Photo Editor passes the JPEG through the image compressor and loses quality.
Jessica talked next about PNG next and how PNG has two common formats, PNG-8 and PNG-24. The difference between them is that PNG-8 holds 256 different colors where as PNG-24 is called true color where it holds as many colors as JPEG, but with a larger format. The reason she gave for using PNG as your source image and make your edits there is that they don’t lose quality when you export, but are often too large for the web. Jessica also went on to say when to use PNG-8 and PNG-24 and really the 8 format is perfect when you don’t need many colors or transparency. The resulting file size is tiny and great for icons.
The next image format she discussed was GIF (jif as the creator wanted it pronounced) and although it was a competitor to PNG it’s primary use is in animations. So if you need something to be animated, use a GIF.
To wrap this up, use JPEG when you need lots of colors, but never use it as your RAW source. If you do not have access to RAW use PNG-24 for your images. GIF’s for animations or start playing with SVG’s for animations as well as Logos.