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
70
Media Handling in WordPress Explained
joemcgill
0
3.4k
Shipping Responsive Images to 25% of the Web
joemcgill
1
100
Optimizing Your Themes for Responsive Images in WordPress
joemcgill
0
190
Responsive Images for Everybody
joemcgill
3
2.4k
Atomic Design with WordPress
joemcgill
1
3.9k
Mobile Friendly Forms
joemcgill
2
470
Responsive Images – STL WordCamp 3.1.2014
joemcgill
1
190

Other Decks in Design

See All in Design
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.3k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
470
Dive Deep into Communication
yomtsu
0
250
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
300
「Figmaプラグイン開発してみた」＠スタメンデザイナーオープン勉強会
kiyoshifuwa
0
160
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
9k
Echoes Boomerang
artcloudyu
PRO
0
150
マンガで分かるサービスデザインガイドライン
senryakuka
1
790
Storyboard Honey
rocioparronrubio
0
130
Building foundations 堅牢なデザイントークンの設計
hilokifigma
1
3k
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
240
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
110

Featured

See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
400
Faster Mobile Websites
deanohume
306
31k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Rails Girls Zürich Keynote
gr2m
94
13k
Visualization
eitanlees
146
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Why Our Code Smells
bkeepers
PRO
336
57k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k

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)