The document discusses three common image formats - JPG, GIF, and PNG - and provides guidance on when to use each one. JPG is best for photographs and when file size needs to be small, as it is lossy but supports 24-bit color and continuous tones. GIF supports transparency and animations but is limited to 256 colors, so it works well for simple icons and logos. PNG has lossless compression, small file sizes, and transparency support, making it suitable for complex graphics like logos with drop shadows. The document emphasizes choosing formats wisely based on each image's specific needs and testing images across devices.

1. IMAGE FORMATS
WHEN and WHY to use them on the web.
Illustrator CC for Web Design: Image Optimization @justinseeley

2. JPG GIF PNG
THE BIG THREE
Illustrator CC for Web Design: Image Optimization @justinseeley

3. JPG
JPGJoint Photographic Experts Group
Illustrator CC for Web Design: Image Optimization @justinseeley

4. JPG
PROS and CONS
✓ 24-bit color
✓ Continuous tone
✓ Smaller file size
Lossy format
No Transparency
Compression artifacts
Illustrator CC for Web Design: Image Optimization @justinseeley

5. JPG
WHEN TO USE IT
✓ Photographs
✓ Keeping file sizes small
✓ When transparency isn’t required
Illustrator CC for Web Design: Image Optimization @justinseeley

6. GIFGraphics Interchange Format
GIF
Illustrator CC for Web Design: Image Optimization @justinseeley

7. PROS and CONS
✓ Transparency
✓ Animations
✓ Lossless
Limited to 256 colors
Large file sizes
Bad continuous toneGIF
Illustrator CC for Web Design: Image Optimization @justinseeley

8. WHEN TO USE IT
✓ Animated GIFs
✓ Simple icons and flat graphics
✓ Basic logos with limited transparencyGIF
Illustrator CC for Web Design: Image Optimization @justinseeley

9. PNGPortable Network Graphics
PNG
Illustrator CC for Web Design: Image Optimization @justinseeley

10. PROS and CONS
✓ Lossless
✓ Small file size
✓ Transparency
Not good for photos
No animation
Older browser supportPNG
Illustrator CC for Web Design: Image Optimization @justinseeley

11. WHEN TO USE IT
✓ If file size doesn’t matter
✓ Logos and line art
✓ Complex transparency (drop shadows, etc.)PNG
Illustrator CC for Web Design: Image Optimization @justinseeley

12. THE CHOICE IS YOURS
Illustrator CC for Web Design: Image Optimization @justinseeley
There is no right or wrong, but choose wisely.

13. Illustrator CC for Web Design: Image Optimization @justinseeley
TRUST YOUR EYES
Look for problems in color, clarity, and file size before exporting.

14. Illustrator CC for Web Design: Image Optimization @justinseeley
KEEP MOBILE IN MIND
Images need to load fast and look great on mobile. Adjust accordingly.