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
110
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.2k
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
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
320
Kouseki | CREATIVE CLASS成果物
Avatar for Yurika Ishida yuri9911
0
250
人工知能のための哲学塾 ニューロフィロソフィ篇 第参夜「河合隼雄と中空構造」
Avatar for miyayou miyayou
0
110
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
320
StartDesignEngineering
Avatar for uchiyama886 uchiyama886
1
140
Webデザイナー中田美穂_ポートフォリオ
Avatar for miho nakada omy
0
170
日経電子版を支えていく Kasane Design System
Avatar for Taito Tanaka taitotnk
0
420
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
350
AVI 2026 Keynote "Vision-Driven Design"
Avatar for Hiroshi Ishii ishii_mit
0
190
Figmaを使わなくなった私が、最近していること
Avatar for めーら/Miki mela_dayo
0
120
デザインワークフローの最前線。 ログラスでのAI活用の現在地
Avatar for Kaori Ueda ukaoli
1
3.4k
Agentic Design Workflowを育てる 「三層デザインハーネス」の現在地
Avatar for Sayaka Kubouchi sayadesign2
0
740

Featured

See All Featured
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.2k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
470
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
3
1.4k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
350
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
490
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.6k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
7k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.6k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
4k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
540
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k

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)