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.4k
Shipping Responsive Images to 25% of the Web
joemcgill
1
99
Optimizing Your Themes for Responsive Images in WordPress
joemcgill
0
180
Responsive Images for Everybody
joemcgill
3
2.4k
Atomic Design with WordPress
joemcgill
1
3.8k
Mobile Friendly Forms
joemcgill
2
440
Responsive Images – STL WordCamp 3.1.2014
joemcgill
1
180

Other Decks in Design

See All in Design
Illustrator2025がやってきた！私が好きな新機能
hamko1114
0
110
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
280
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
810
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
【デザイン初め新年会2025｜01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
140
(第１回) アーキテクト・テックリード育成講座
masakaya
0
160
利用者が離れないUX/UIデザイン　長く使われる業務アプリデザインのポイント
ncdc
5
430

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Faster Mobile Websites
deanohume
306
31k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
Building Adaptive Systems
keathley
40
2.4k
Automating Front-end Workflow
addyosmani
1367
200k
Making Projects Easy
brettharned
116
6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
4 Signs Your Business is Dying
shpigford
182
22k
Become a Pro
speakerdeck
PRO
26
5.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k

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)