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

Prepping Images for the Web

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
100
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
580
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
230

Other Decks in Design

See All in Design
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
110
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
170
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
820
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
4
1.1k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
Avatar for 都村　美帆 abokadotyann
4
970
The Art of Caring
Avatar for Klemens klemens
0
360
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
220
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
7
5.7k
デザインとフロントエンドの境界が融ける Claude Code × Figma
Avatar for littlebusters littlebusters
2
3.1k
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
420
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.3k
開発・制作におけるUI・UXデザインの重要性について～UI・UXデザインってなんだろう～
Avatar for yomogi_sakura yamasaku
0
130

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
280
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
390
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
220
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
460
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
300
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
300

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)