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
130

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
92
Media Handling in WordPress Explained
Avatar for Joe McGill joemcgill
0
3.6k
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
230
Responsive Images for Everybody
Avatar for Joe McGill joemcgill
3
2.5k
Atomic Design with WordPress
Avatar for Joe McGill joemcgill
1
4.1k
Mobile Friendly Forms
Avatar for Joe McGill joemcgill
2
560
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
220

Other Decks in Design

See All in Design
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
0
130
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
350
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
7
5.1k
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.3k
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
0
360
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON Design vivion
6
13k
第18回サイゼミ
Avatar for LW lw
1
3.6k
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
180
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
250
次世代のクリエイティブ体験！Photoshopの最新機能で新しい未来を切り開こう
Avatar for コネクリ connecre
0
120
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
260
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
100

Featured

See All Featured
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.2k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
150
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
410
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
11k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
490
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.7k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
5.8k

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)