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.