$30 off During Our Annual Pro Sale. View Details »

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
80
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
220
Responsive Images for Everybody
Avatar for Joe McGill joemcgill
3
2.5k
Atomic Design with WordPress
Avatar for Joe McGill joemcgill
1
4k
Mobile Friendly Forms
Avatar for Joe McGill joemcgill
2
540
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
210

Other Decks in Design

See All in Design
Ana Cortes Visual Development Portfolio 2025
Avatar for Ana Belen Cortes Diaz haruanleb
0
140
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
180
The Spring Festival
Avatar for Jisun jisun
0
120
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
900
DESIGNEAST 2025 A-3
Avatar for Shigeru Kobayashi _kotobuki_
0
120
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
320
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
160
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
330
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
970k
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
150
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
830
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
380

Featured

See All Featured
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
94
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
130
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
300
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.7k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
850
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.1k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
680
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
320
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
77

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)