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
520
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
210

Other Decks in Design

See All in Design
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
0
430
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
520
sachi_y_portfolio
Avatar for Sachi sachi337
0
530
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
250
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
Avatar for Andrew Shapiro ashapiro
0
400
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
580
Character Experience AI 〜 AIキャラクターのつくりかた 〜
Avatar for SmartBank smartbank
1
300
文字コントラストを改めて考える / Reevaluating Text Contrast
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
510
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
400
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
150
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.3k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
890k

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
620
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
3
58
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
850
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k

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)