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

Prepping Images for the Web

Joe McGill
April 17, 2014
Design
0
120

Prepping Images for the Web

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

Joe McGill

April 17, 2014
Tweet

More Decks by Joe McGill

See All by Joe McGill
Debugging WordPress – Tips, tricks, and tools
joemcgill
2
68
Media Handling in WordPress Explained
joemcgill
0
3.3k
Shipping Responsive Images to 25% of the Web
joemcgill
1
97
Optimizing Your Themes for Responsive Images in WordPress
joemcgill
0
170
Responsive Images for Everybody
joemcgill
3
2.4k
Atomic Design with WordPress
joemcgill
1
3.8k
Mobile Friendly Forms
joemcgill
2
420
Responsive Images – STL WordCamp 3.1.2014
joemcgill
1
170

Other Decks in Design

See All in Design
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1k
太田博三(@usagisan2020)
otanet
0
200
Design System for training program
mct
0
160
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
33k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
170
ENEOS社事例｜アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
510
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
450
Карта реализации историй — убийца USM
ashapiro
0
260
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
majimasachi
0
290
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.6k
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
210
デザインシステム構築の進め方　基本から実践まで、具体的な手順を徹底解説
ncdc
1
270

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Into the Great Unknown - MozCon
thekraken
33
1.5k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
It's Worth the Effort
3n
183
28k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Faster Mobile Websites
deanohume
305
30k
Embracing the Ebb and Flow
colly
84
4.5k
Optimizing for Happiness
mojombo
376
70k
Scaling GitHub
holman
458
140k
KATA
mclloyd
29
14k

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)