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
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 hiranotomoki hiranotomoki
0
210
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
150
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.4k
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
260
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
440
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
1
5.6k
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
Avatar for kgsi kgsi
0
720
もう迷わない！“なんとなく”を卒業するフォントの選び方【村田俊英】
Avatar for 村田俊英 toshihidemurata
0
630
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.6k
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
380
デザインの文脈を理解する：エンジニアがデザインカンファレンスに参加して得た学びと気づき
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
220
広い関与の可能性に どう向き合うのか？ 私たちは。｜Timee MarketingDesign 2026-06-18
Avatar for bebe bebe
0
160

Featured

See All Featured
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
390
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
140
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
410
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
310
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.5k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.8k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.6k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.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)