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.

PNG

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.

GIF

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.

SVG

The last image format Jessica talked about was SVG and although SVG is new in comparison to other image formats it differs completely in how the image is created. This format uses Vectors to create the image, this helps with Icons and other logos you wish to create but only have one copy of the file. SVG does not require you to export out different versions of the same image at different sizes as they scale and do not look pixelated. SVG also can be used in animations but it has not grown in popularity yet. A few fun things with SVG is you can use CSS and Javascript to alter the color and behavior of the image. SVG works across all browsers and there are many different free image creation tools out there that can create and work with SVG.

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.