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

Prepping Images for the Web

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.

Joe McGill

April 17, 2014
Tweet

More Decks by Joe McGill

See All by Joe McGill
Debugging WordPress – Tips, tricks, and tools
joemcgill
2
68
Media Handling in WordPress Explained
joemcgill
0
3.4k
Shipping Responsive Images to 25% of the Web
joemcgill
1
99
Optimizing Your Themes for Responsive Images in WordPress
joemcgill
0
180
Responsive Images for Everybody
joemcgill
3
2.4k
Atomic Design with WordPress
joemcgill
1
3.8k
Mobile Friendly Forms
joemcgill
2
430
Responsive Images – STL WordCamp 3.1.2014
joemcgill
1
180

Other Decks in Design

See All in Design
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
330
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
190
プロダクトデザインの「守破離」の「破」について
hayashirine
0
290
【デザイン初め新年会2025｜01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
8k
(第１回) アーキテクト・テックリード育成講座
masakaya
0
130
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.4k
Arborea Art Book
thebogheart
1
320
Goodpatch Tour💙 / We are hiring!
goodpatch
31
780k
Dinosaur Mayhem
storyartist
0
120
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
5
1.7k
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.1k
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
100

Featured

See All Featured
Side Projects
sachag
452
42k
GraphQLとの向き合い方2022年版
quramy
44
13k
GitHub's CSS Performance
jonrohan
1030
460k
Docker and Python
trallard
43
3.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Applications with DynamoDB
mza
93
6.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf 2023
tenderlove
29
970
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Scaling GitHub
holman
459
140k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.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)