Prepping Images for the Web

A quick cheat sheet of best practices to use when saving images for the web.

Transcript

1. Prepping Images for the WEb @joemcgill
2. The Basics • use RGB Color mode • Resolution should be 72 ppi • size at 2x the final output for retina (save 2 versions: 2x & 1x)
3. Formats • JPEG: Best for Photos • GIF: Best For Animation or Graphics without transparency • PNG: Best for Graphics w/ Transparency • SVg: Vectors for the web!!
4. Compression GOAL: Smallest file possible without losing (too much) quality • JPEG: 60-85, Blur 0.2, Remove Meta • GIF: Dither & reduce colors • PNG: Use Png-24 • SVg: OUtput from Illustrator…
5. ILLUSTRATOR SVG SETTINGS File > Save as…
6. Bonus Points More optimization tools ! • ImageOptim (http://imageoptim.com/) • ImageAlpha (http://pngmini.com/) • SVGO-GUI (https://github.com/svg/svgo-gui)
7. Web Fonts more design goodies • Adobe Type Kit
 (https://typekit.com/fonts/adonis-web) • GOOGLE WEB FONTS
 (http://www.google.com/fonts)