Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Other Decks in Design

See All in Design
Emmy's Artwork
Avatar for McKenna mcksmith
0
200
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
140
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
550
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
510
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
270
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
5
4.2k
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
500
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
200
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
290
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
830
kintone Style Book
Avatar for kintone kintone
6
10k

Featured

See All Featured
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.2k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
120
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
49
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
8.7k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
250

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)