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
0
130

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
90
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
110
Optimizing Your Themes for Responsive Images in WordPress
Avatar for Joe McGill joemcgill
0
220
Responsive Images for Everybody
Avatar for Joe McGill joemcgill
3
2.5k
Atomic Design with WordPress
Avatar for Joe McGill joemcgill
1
4k
Mobile Friendly Forms
Avatar for Joe McGill joemcgill
2
550
Responsive Images – STL WordCamp 3.1.2014
Avatar for Joe McGill joemcgill
1
220

Other Decks in Design

See All in Design
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
290
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
0
110
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
390
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
490
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
2
250
AI情報に溺れながら、それでも頑張って泳ぐための思考法
Avatar for Iori67 yoriss67
0
130
デザインするために「多様性」について考える
Avatar for なつ iflection
0
190
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
180
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
940
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
510
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
190

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
49
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
52
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
180
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
8.7k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
240
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
0
260
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k

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)