Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prepping Images for the Web

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
94
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
230
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
560
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
220

Other Decks in Design

See All in Design
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.4k
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
570
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
510
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
140
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
460
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
120
kintone Style Book
Avatar for kintone kintone
6
13k
全員がアウトプットを出せる時代、 誰を採用する?
Avatar for NishaMe nishame
0
370
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
510
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
270
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
490
2026_01_07_３DプリントはじめましたLT.pdf
Avatar for HideakiTakechi hideakitakechi
0
160

Featured

See All Featured
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
480
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
A Soul's Torment
Avatar for Nat Ma seathinner
6
2.6k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
760
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
120
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
890
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

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)