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 Yu Morita securecat
1
620
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
330
ビジネスアナリシスはビジネス”分析”じゃないよ！～システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス～
Avatar for BPStudy bpstudy
0
560
Kid Cowboy 103
Avatar for Marilu Molina marilutwin
0
270
今日から意識できるアクセシビリティ
Avatar for fumiko fumiko
0
260
Liquid Iron
Avatar for Brynn McDucky P. mcduckyart
1
110
portfolio_YumiYasuda
Avatar for yumi yasuda yum0418
0
290
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
Avatar for Aki spring_aki
4
300
UXとUIの違いを自分の言葉で表現する： UX DAYS TOKYO
Avatar for Mizunashi Mana mizunashi_mana
0
120
freee + Product Design FY25Q4
Avatar for freee freee
4
14k
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
1
190
sachi_y_portfolio
Avatar for Sachi sachi337
0
320

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
54k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
830
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.4k

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)