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

Prepping Images for the Web

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.

Joe McGill

April 17, 2014
Tweet

More Decks by Joe McGill

See All by Joe McGill
Debugging WordPress – Tips, tricks, and tools
joemcgill
2
68
Media Handling in WordPress Explained
joemcgill
0
3.3k
Shipping Responsive Images to 25% of the Web
joemcgill
1
97
Optimizing Your Themes for Responsive Images in WordPress
joemcgill
0
160
Responsive Images for Everybody
joemcgill
3
2.4k
Atomic Design with WordPress
joemcgill
1
3.8k
Mobile Friendly Forms
joemcgill
2
400
Responsive Images – STL WordCamp 3.1.2014
joemcgill
1
170

Other Decks in Design

See All in Design
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
880
新しいemoji😄のアイデアを Unicodeが募集中‼️🏃‍♀️💨💨💨 傾向を学んでみんな提案しよう💪
oguemon
2
680
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
5
48k
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
480
今日から始める グラレコ チャレンジ　DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
100
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
280
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
520
Fleet Gas Station
joshtang
0
140
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
370
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.4k
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
32k

Featured

See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Into the Great Unknown - MozCon
thekraken
32
1.5k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
The Invisible Side of Design
smashingmag
297
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Documentation Writing (for coders)
carmenintech
65
4.4k
Practical Orchestrator
shlominoach
186
10k
The Cult of Friendly URLs
andyhume
78
6k
GitHub's CSS Performance
jonrohan
1030
460k

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)