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
72
Media Handling in WordPress Explained
Avatar for Joe McGill joemcgill
0
3.5k
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
210
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
510
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
200

Other Decks in Design

See All in Design
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
1.9k
企画を動かすデザイナーの思考！「広げて絞る」アプローチ。
Avatar for Hikida Kan hikidakan
0
150
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
210
1920*1080pxに設定したケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3.2k
sachi_y_portfolio
Avatar for Sachi sachi337
0
500
ランドマークが光る！季節を彩るナビ体験 - Mobility Night #3 -
Avatar for tetsuya kitauji kitau
0
110
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
250
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
0
230
Yahoo!フリマ：生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
430
7 Core Values of Round-L
Avatar for Round-L wired888
0
1.4k
読書シェア会 vol.5 / Yumemi.grow 20250526
Avatar for Rakus_Dev rakus_dev
0
1.7k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
Avatar for Miwa Kuramitsu transit_kix
1
1.1k

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
185
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
302
21k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.6k

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)