Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Prepping Images for the Web

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Joe McGill Joe McGill
April 17, 2014
Design
140
0

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

More Decks by Joe McGill

See All by Joe McGill
Debugging WordPress – Tips, tricks, and tools
Avatar for Joe McGill joemcgill
2
100
Media Handling in WordPress Explained
Avatar for Joe McGill joemcgill
0
3.7k
Shipping Responsive Images to 25% of the Web
Avatar for Joe McGill joemcgill
1
120
Optimizing Your Themes for Responsive Images in WordPress
Avatar for Joe McGill joemcgill
0
260
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
590
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
240

Other Decks in Design

See All in Design
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ～継承と挑戦を両立するデザイン手法～
Avatar for Cygames, Inc. cygames
PRO
3
5.2k
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
200
PAMPHLET.pdf
Avatar for M-HAND,Inc. mhand01
0
2k
いいUIとは？初心者向けに事例をもとにUIデザインを分解
Avatar for 原 佑一｜クリエイティブディレクター yuichi_hara7
13
6.7k
Starfall (2025)
Avatar for Rachel Poon rezaline
0
130
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
Avatar for Yu Morita securecat
1
270
Agentic Design Workflowを育てる 「三層デザインハーネス」の現在地
Avatar for Sayaka Kubouchi sayadesign2
0
550
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
Avatar for AccessInnovations accessinnovations
0
170
東京都市大学 都市生活学部×一般社団法人オープン企画イベント　「誰もがデザイナーである」とはどういうことか？ 【エツィオ・マンズィーニ氏 特別来日・基調講演】
Avatar for Kimura Atsunobu a2k
1
120
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
6k
富山デザイン勉強会_デザイン思考.pdf
Avatar for keita keita_yoshikawa
3
190
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
4
30k

Featured

See All Featured
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
420
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
410
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
540
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
290
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
680
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.2k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
510
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
320
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
142
7.7k

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)