Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prepping Images for the Web

7cef1c9108207ec24db7a40f142db676?s=47 Joe McGill
April 17, 2014
Design
0
92

Prepping Images for the Web

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

7cef1c9108207ec24db7a40f142db676?s=128

Joe McGill

April 17, 2014
Tweet

More Decks by Joe McGill

See All by Joe McGill
7cef1c9108207ec24db7a40f142db676?s=48 joemcgill
2
41
7cef1c9108207ec24db7a40f142db676?s=48 joemcgill
0
2.8k
7cef1c9108207ec24db7a40f142db676?s=48 joemcgill
1
70
7cef1c9108207ec24db7a40f142db676?s=48 joemcgill
0
92
7cef1c9108207ec24db7a40f142db676?s=48 joemcgill
3
2.3k
7cef1c9108207ec24db7a40f142db676?s=48 joemcgill
1
3k
7cef1c9108207ec24db7a40f142db676?s=48 joemcgill
2
190
7cef1c9108207ec24db7a40f142db676?s=48 joemcgill
1
84

Other Decks in Design

See All in Design
Ca5ba581cade0686426c6bff21a45482?s=48 joelmayer
0
410
372b0d6ab90110521a5d3aa09f736abc?s=48 seathinner
2
170
00ff292ab7936a0a4e4c8a76ab5b4d52?s=48 lily2251390
0
120
D0255d4b7110cd38b2376d50d228432d?s=48 tomprior
1
110
4b7cfc2f7e1087517064667a30fddd54?s=48 commmune
1
680
F2a18f1ef63198439d0722c7e88129e2?s=48 kignato1
0
230
5c1aa8f171374b061b1a811f62568dc9?s=48 angelofalls
0
500
3aff10911e72eae2d6b6a71b6c49de82?s=48 jjgallaher
PRO
0
180
67968533c44f7cec07648395b112a685?s=48 mimiguri
0
11k
Eb3f099a0ad1b2f8ff9180432ab10d72?s=48 mollysart
0
140
Dfa5ba72c278ca34ab320c0a582da888?s=48 cyberagent_creators
2
18k
F1323a5740b5871c4c11e5758a4f8e8f?s=48 fchicote
0
120

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
408
58k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
289
110k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.4k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
64
3.8k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
652
110k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
104
6.3k
78b475797a14c84799063c7cd073962f?s=48 holman
447
140k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.8k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
176
14k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.7k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.7k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
258
24k

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)