1. 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.

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

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

9. 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

10. 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

11. The End