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
72
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
100
Optimizing Your Themes for Responsive Images in WordPress
Avatar for Joe McGill joemcgill
0
200
Responsive Images for Everybody
Avatar for Joe McGill joemcgill
3
2.4k
Atomic Design with WordPress
Avatar for Joe McGill joemcgill
1
3.9k
Mobile Friendly Forms
Avatar for Joe McGill joemcgill
2
500
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
200

Other Decks in Design

See All in Design
Cyber Heart Online Book
Avatar for Hannah hjnasby
0
150
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
490
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
150
Kid Cowboy 103
Avatar for Marilu Molina marilutwin
0
280
Design Studio Deck | インクルーシブデザインスタジオCULUUM
Avatar for インクルーシブデザインスタジオCULUMU culumu
3
2.7k
線で考える画面構成
Avatar for natsuume natsuume
1
900
ランドマークが光る！季節を彩るナビ体験 - Mobility Night #3 -
Avatar for tetsuya kitauji kitau
0
110
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
Avatar for bebe bebe
0
700
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
320
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
Avatar for Saiko.T _psyc0_
0
230
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
1
220
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
0
400

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.9k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
KATA
Avatar for Megan Lloyd mclloyd
31
14k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
510
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Side Projects
Avatar for Sacha Greif sachag
455
43k

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)