JPG vs GIF vs PNG What is the difference? There are hundreds of different file types for images. They are usually created for a specific purpose and have different properties. When working with images it is important to understand the differences.

JPEG Stands for “Joint Photographic Experts Group” Uses “lossy” compression - which means parts of the data in the file are discarded in order to make a smaller file Compressed files take up less room, can be transferred quicker 24 bits which allows up to 16 million colors Does not support transparency Does not support animation

Lossy Compression Parts of the data in the file are discarded in order to make a smaller file - usually these parts are not obvious to the human eye or ear - once removed though original image cannot be recovered Transform Encoding - averages out the color in small blocks Chroma Subsampling - adjusts brightness vs the actual color - used often in video games

JPG compression comparison Used high quality compression - larger file made smaller 16KB Tried to make a small file bigger - was compressed to too low a quality 4KB

GIF Graphics Interchange Format 8 bits which allows 256 colors Uses “lossless” compression - which does not throw any data away Is best of images that use a lot of flat areas of color - as in clipart Does support small animations Does support transparency

Lossless Compression All the data from the original file is kept Encoding: - Run Length (takes a series of similar values and stores them as a single value with a count) - Huffman Coding - a data compression technique (lossless) - the more often a series is repeated - the shorter the binary code to represent it is (efficiency) - LZ77 compression algorithm: replaces repeated occurrences of data with references to a single copy of that data existing earlier in the data stream

Animation Areas of the photo are erased so only the bunny is left - the gray squares represent ‘transparency” - like glass - so an image underneath will show through Flat areas of color

Transparent image placed on top of another image - see how the bunnies look almost natural?

PNG Portable Network Graphic Was intended to be a substitute for GIF - due to patent issues Creates small file sizes and uses “lossless” compression Does support transparency Does not support animations Not all browser support the use of PNG formats

PSD Photoshop Document Default file type for saving in the Photoshop program Allows an images individual layers to be saved which means large file sizes Cannot be used as a PSD in other programs Editing can continue on different layers even when saved To use in another program the file must be converted to another type such as .jpg or .gif When converting a PSD image will be “flattened” and compressed Once converted the layers are gone - any original editing must take place in the original PSD file

The End