Images - 7 mistakes (first draft)

Image Optimization: 7 mistakes in 5 minutes Stoyan Stefanov [email_address] [email_address]

About the presenter ,[object Object],[object Object],[object Object],[object Object]

Hmm, images? ,[object Object],[object Object],[object Object],[object Object]

What % of page weight is images? ,[object Object],[object Object],[object Object],[object Object],36% Yahoo! JP 10 27% Blogger 9 35% Facebook 8 39% Wikipedia 7 48% MySpace 6 41% MSN 5 64% Live.com 4 62% YouTube 3 75% Google 2 29% Yahoo! 1

GIF vs. PNG8 vs. truecolor PNG ,[object Object],[object Object],[object Object],[object Object]

All we are saying is: “Give PiNG a chance!” ,[object Object],[object Object],[object Object]

Mistake #1: Using GIF when PNG is smaller ,[object Object],[object Object],[object Object],[object Object]

Mistake #2: Not crushing PNGs ,[object Object],[object Object],[object Object],[object Object]

Mistake #3: Not stripping JPEG metadata ,[object Object],[object Object],[object Object],[object Object]

Mistake #4: Using truecolor PNG instead of PNG8 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Mistake #5: Using AlphaImageLoader ,[object Object],[object Object]

Mistake #5: solution ,[object Object],[object Object],[object Object]

Mistake #6: serving dynamically generated images “as is” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mistake #7: Not combining images ,[object Object],[object Object],…

Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)

55% saving (1000+ colors are lost but who can tell?) 25% saving PNG8 (256 colors) Crushed (1408 colors) Original (1408 colors)

URLs: Exceptional Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

URLs: Tools ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Images - 7 mistakes (first draft)

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Images - 7 mistakes (first draft)

Semelhante a Images - 7 mistakes (first draft) (20)

Mais de Stoyan Stefanov

Mais de Stoyan Stefanov (20)

Último

Último (20)

Images - 7 mistakes (first draft)