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

Other Decks in Design

See All in Design
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
490
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
1
8.4k
「惜しいデザイン」 を生み出さないための AIレビューループ
Avatar for Kazuhiro Tobita 0b1tk
3
3.5k
2026-04-06 CMU School of Design "Vision-Driven Design"
Avatar for Hiroshi Ishii ishii_mit
0
130
Decksh keywords
Avatar for Anthony Starks ajstarks
0
110
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
Avatar for Ayumi Suzuki ayumidesign
0
190
分散するデザイン組織をつなぐ　デザインミートアップの取り組み/nikkei-tech-talk49
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
170
20260309_3月ICTデザイン勉強会_地域創生2.0
Avatar for Kimura Atsunobu a2k
0
170
PAMPHLET.pdf
Avatar for M-HAND,Inc. mhand01
0
1.6k
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
380
test deck title
Avatar for Shota Matsuo shotamatsuo
0
1.5k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
Avatar for 都村　美帆 abokadotyann
4
1k

Featured

See All Featured
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
73
41k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
2
3.8k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
280
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.9k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
660
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
550
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
850
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
470
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k

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)