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
130
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
96
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
240
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
220

Other Decks in Design

See All in Design
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.2k
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.5k
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
2
470
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
610
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
600
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON vivion
7
17k
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
0
950
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.1k
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
190
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
540
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
250
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
880

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
220
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
500
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
220
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
190
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k

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)