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

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
Tweet

More Decks by Joe McGill

See All by Joe McGill
Debugging WordPress – Tips, tricks, and tools
Avatar for Joe McGill joemcgill
2
71
Media Handling in WordPress Explained
Avatar for Joe McGill joemcgill
0
3.4k
Shipping Responsive Images to 25% of the Web
Avatar for Joe McGill joemcgill
1
100
Optimizing Your Themes for Responsive Images in WordPress
Avatar for Joe McGill joemcgill
0
200
Responsive Images for Everybody
Avatar for Joe McGill joemcgill
3
2.4k
Atomic Design with WordPress
Avatar for Joe McGill joemcgill
1
3.9k
Mobile Friendly Forms
Avatar for Joe McGill joemcgill
2
500
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
200

Other Decks in Design

See All in Design
問いの変遷
Avatar for なつ iflection
0
140
Storyboard Honey
Avatar for Rocío Parrón rocioparronrubio
0
270
私とデザインの10年
Avatar for なつ iflection
0
130
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.5k
Fem tips om ux-text • WSA-dagen 29 jan 2025
Avatar for Jonas Söderström jonas_blind_hen
PRO
0
180
ビジネスアナリシスはビジネス”分析”じゃないよ！～システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス～
Avatar for BPStudy bpstudy
0
510
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
Avatar for Shota Ikeyatsu ikeyatsu
2
1.8k
Starry | Storyboards | Scene 1-21
Avatar for Gio Fortunato giofortuna_story
0
280
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
3.9k
生成AIを活用した組み込みSW設計書検索システム開発
Avatar for mtsukada licux
7
1.1k
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
0
330
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.5k

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
48
14k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k

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)