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

Prepping Images for the Web

Joe McGill
April 17, 2014
Design
0
110

Prepping Images for the Web

A quick cheat sheet of best practices to use when saving images for the web.

Joe McGill

April 17, 2014
Tweet

More Decks by Joe McGill

See All by Joe McGill
Debugging WordPress – Tips, tricks, and tools
joemcgill
2
62
Media Handling in WordPress Explained
joemcgill
0
3.2k
Shipping Responsive Images to 25% of the Web
joemcgill
1
91
Optimizing Your Themes for Responsive Images in WordPress
joemcgill
0
150
Responsive Images for Everybody
joemcgill
3
2.4k
Atomic Design with WordPress
joemcgill
1
3.6k
Mobile Friendly Forms
joemcgill
2
310
Responsive Images – STL WordCamp 3.1.2014
joemcgill
1
120

Other Decks in Design

See All in Design
Product-Writing
aguringo
6
2.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
730
Wishing Star Comic
torije
2
1.2k
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
280
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
220
今日から始めるDesignOpsのヒント
isaikaori
1
420
実案件でのFigmaデータの作り方
xxxkinu
2
220
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
860
Ride or Die Animatics
warwatkar
0
140
不可分の民藝から可分の工業産業へ
creatorqsf
1
350
Designing UIs without a UI designer
strongeron
0
120

Featured

See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
A Philosophy of Restraint
colly
197
16k
Visualization
eitanlees
136
14k
Faster Mobile Websites
deanohume
299
30k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Why Our Code Smells
bkeepers
PRO
331
56k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Side Projects
sachag
451
41k
Unsuck your backbone
ammeep
663
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Designing for humans not robots
tammielis
248
25k

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)