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

Prepping Images for the Web

Avatar for Joe McGill 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.

Avatar for Joe McGill

Joe McGill

April 17, 2014
Tweet

More Decks by Joe McGill

See All by Joe McGill
Debugging WordPress – Tips, tricks, and tools
Avatar for Joe McGill joemcgill
2
74
Media Handling in WordPress Explained
Avatar for Joe McGill joemcgill
0
3.5k
Shipping Responsive Images to 25% of the Web
Avatar for Joe McGill joemcgill
1
110
Optimizing Your Themes for Responsive Images in WordPress
Avatar for Joe McGill joemcgill
0
210
Responsive Images for Everybody
Avatar for Joe McGill joemcgill
3
2.4k
Atomic Design with WordPress
Avatar for Joe McGill joemcgill
1
4k
Mobile Friendly Forms
Avatar for Joe McGill joemcgill
2
530
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
210

Other Decks in Design

See All in Design
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
190
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
380
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
280
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
430
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
270
CMS管理画面のアクセシビリティ
Avatar for Rikiya Ihara / magi magi1125
8
2.5k
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
210
Spectrum Tokyo_ デザイナーが事業責任者になってみた
Avatar for Woo seop Shin shin_2
0
160
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
160
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
260
mento Design Team Portfolio
Avatar for mento _official mento0fficial
1
940
DESIGNEAST 2025 A-3
Avatar for Shigeru Kobayashi _kotobuki_
0
100

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2.1k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
620
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
190
55k

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)