Prepping Images for the Web

April 17, 2014

Design

140

Prepping Images for the Web

A quick cheat sheet of best practices to use when saving images for the web.

Joe McGill

April 17, 2014

More Decks by Joe McGill

See All by Joe McGill

Debugging WordPress – Tips, tricks, and tools

2

100

Media Handling in WordPress Explained

0

3.6k

Shipping Responsive Images to 25% of the Web

1

120

Optimizing Your Themes for Responsive Images in WordPress

0

260

Responsive Images for Everybody

3

2.5k

Atomic Design with WordPress

1

4.1k

Mobile Friendly Forms

2

580

Responsive Images – STL WordCamp 3.1.2014

1

240

Other Decks in Design

See All in Design

怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-

1

270

Kouseki | CREATIVE CLASS成果物

0

190

全員がアウトプットを出せる時代、誰を採用する?

0

660

明日から真似できる、AIでデザインシステムを活用する方法

0

460

1000人規模の組織でデザインハーネスを導入するための第一歩

PRO

5

3.9k

kintone開発におけるライターの役割の変化〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development

0

200

UI生成の鍵は要件整理 -デザインプロセスのエッセンスをプロンプト作成に取り入れよう-

4

1.1k

Basket_of_love.pdf

0

300

Of Ordination and Rebellion exploration sketches

0

220

分散するデザイン組織をつなぐ　デザインミートアップの取り組み/nikkei-tech-talk49

nikkei_engineer_recruiting

1

200

なぜ、インサイトを貯めるのか？

3

2.7k

デザインハーネス〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜 / PdEConf2026 Design Harness

12

20k

Featured

See All Featured

Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO

3

240

Digital Ethics as a Driver of Design Innovation

PRO

1

420

Exploring the relationship between traditional SERPs and Gen AI search

raygrieselhuber

PRO

2

4.3k

DevOps and Value Stream Thinking: Enabling flow, efficiency and business value

1

380

The Curious Case for Waylosing

1

500

Hiding What from Whom? A Critical Review of the History of Programming languages for Music

3

1.2k

Performance Is Good for Brains [We Love Speed 2024]

12

1.8k

PRO

31

6.2k

<Decoding/> the Language of Devs - We Love SEO 2024

1

320

Sharpening the Axe: The Primacy of Toolmaking

46

3k

How to Think Like a Performance Engineer

28

2.8k

It's Worth the Effort

188

29k

Transcript

Prepping Images for the WEb @joemcgill
The Basics • use RGB Color mode • Resolution should
be 72 ppi • size at 2x the final output for retina (save 2 versions: 2x & 1x)
Formats • JPEG: Best for Photos • GIF: Best For
Animation or Graphics without transparency • PNG: Best for Graphics w/ Transparency • SVg: Vectors for the web!!
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…
ILLUSTRATOR SVG SETTINGS File > Save as…
Bonus Points More optimization tools ! • ImageOptim (http://imageoptim.com/) •
ImageAlpha (http://pngmini.com/) • SVGO-GUI (https://github.com/svg/svgo-gui)
Web Fonts more design goodies • Adobe Type Kit  (https://typekit.com/fonts/adonis-web)
• GOOGLE WEB FONTS  (http://www.google.com/fonts)