Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
110
Media Handling in WordPress Explained
Avatar for Joe McGill joemcgill
0
3.7k
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
260
Responsive Images for Everybody
Avatar for Joe McGill joemcgill
3
2.5k
Atomic Design with WordPress
Avatar for Joe McGill joemcgill
1
4.2k
Mobile Friendly Forms
Avatar for Joe McGill joemcgill
2
590
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
240

Other Decks in Design

See All in Design
Edmonton River Slidedeck
Avatar for Edmonton River edmontonriver
0
470
デザイナーがいない部署にハーネスを設計する
Avatar for 太田賢一 kenichiota0711
5
5.9k
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
Avatar for Ayumi Suzuki ayumidesign
0
290
1000人規模の組織でデザインハーネスを導入するための第一歩
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
5
4.5k
AIの定期タスクを6本作って、3本止めた話
Avatar for rai muture rai263
0
120
言語化しきれなくてもいい〜勉強会を「完璧な成果を出す場」から「不確実な刺激と体験を持ち帰る場へ〜
Avatar for hott3 hott3
0
190
UNION TEC GROUP | 2026' Project Portfolio
Avatar for UNION TEC uniontec2000
0
140
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
520
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
1
670
デザイン組織の広報が、AIを_社内外に広げる_ためにやってきたこと
Avatar for MIXI DESIGN mixi_design
PRO
0
180
Findy - デザインチーム紹介 / Findy Design Team Culture Deck
Avatar for Findy findyinc
14
150k
【2026】ポートフォリオ_大坪明日香
Avatar for tsubo52 tsubo52
0
150

Featured

See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
670
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.9k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
620
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
600
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
970
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
650
A Soul's Torment
Avatar for Nat Ma seathinner
8
3.9k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k

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)