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
140
0

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

More Decks by Joe McGill

See All by Joe McGill
Debugging WordPress – Tips, tricks, and tools
Avatar for Joe McGill joemcgill
2
99
Media Handling in WordPress Explained
Avatar for Joe McGill joemcgill
0
3.6k
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
250
Responsive Images for Everybody
Avatar for Joe McGill joemcgill
3
2.5k
Atomic Design with WordPress
Avatar for Joe McGill joemcgill
1
4.1k
Mobile Friendly Forms
Avatar for Joe McGill joemcgill
2
570
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
230

Other Decks in Design

See All in Design
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
2
1.6k
デザインとフロントエンドの境界が融ける Claude Code × Figma
Avatar for littlebusters littlebusters
1
3k
JBUG大阪#9_登壇資料_引き継ぎで困らないためのBacklogWikiの整え方_ミスと属人化を防ぐために、 “次の人が動ける状態”をどう残すか
Avatar for WebNAUT by Beeworks webnaut
1
150
全員がアウトプットを出せる時代、 誰を採用する?
Avatar for NishaMe nishame
0
580
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
210
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.3k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
Avatar for 都村　美帆 abokadotyann
4
900
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON vivion
7
18k
デザインの文脈を理解する：エンジニアがデザインカンファレンスに参加して得た学びと気づき
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
220
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
1
210
エンジニアがAI活用してスライドデザインできる世界が来たよ！
Avatar for 甲斐 甲 kaikou
1
290
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.4k

Featured

See All Featured
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
230
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
360
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
270
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k

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)