HI, I’m Tim.• Marketing & CommunicationsManager, Penn State University• Introvert who happens tocommunicate (+ design ande...
SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define com...
1. WHY ARE YOU DOINGTHIS TO ME?
Source: Web Conference
Source: http://www.getacoder.com/blog/wp-content/uploads/2012/05/slow_website_loading.jpg
Source: Keynote 2012 Mobile User Survey - keynote.com“HOW LONG DO YOUEXPECT TO WAIT?”
TAKEAWAYS• 74% of laptop/desktop users expect towait 3 seconds or less.• 60% of tablet users expect to wait 3seconds or le...
Source: Keynote 2012 Mobile User Survey - keynote.com“WHAT DO YOU DO IF THEWAIT IS TOO LONG?”MOBILE
SECOND CHANCE?
Source: Web Conference
Source: Keynote 2012 Mobile User Survey - keynote.com“WHAT DO YOU DO IF THEWAIT IS TOO LONG?”MOBILE
YOU HAVE 3 SECONDSTO CAPTURETHE USER.
FIRST IMPRESSIONSMATTER. PERIOD.
PERFORMANCE GOLDENRULE80-90% of the end-user response time isspent on the front end. Start there.
Source:http://yuiblog.com/blog/2006/11/28/performance-research-part-1/TIME SPENT LOADINGPOPULAR WEBSITES 2006
Source: http://www.webpagetest.orgTIME SPENT LOADINGPOPULAR WEBSITES 2013
SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define com...
2. MEASURING PAGELOAD TIME
WEBPAGETEST http://webpagetest.org
MORE ON HOW TO READWEBPAGETESTWebPagetest Documentation available at:http://bit.ly/18JLjEF
AGESPEED http://developers.google.com/speed/pagespeed
SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define com...
3. KNOW when to use THERIGHT FILE TYPE
• Used for photographs orimages with complexcolors.• Supports up to 16.7million colors• Able to be compressedconsiderably•...
• Low resolution images,solid colors• Crisp edges, no gradients• Limited to 256 colors• Transparency• Lossless - Maintains...
WHAT DO 8 AND24 MEAN?• Bits (Binary digits)• 1 bit = 2 colors (0, 1)• 2 bit = 4 colors (00, 01, 10, 11)• 8 bit = 256 color...
Source: sitepoint.com• Low resolution images,solid colors• Crisp edges, no gradients• Limited to 256 colors• Transparency ...
• Images with dropshadows/glows, softedges, gradients thatrequire transparency• Tend to be larger filesizes• Lossless - Ma...
Source: funnycatwallpapers.comOriginal Size: 1920x1080 - 1.5 MB
Source: funnycatwallpapers.comOptimized: 960x540 GIF - 34 KB
Source: funnycatwallpapers.comOptimized: 960x540 PNG - 34 KB
Source: funnycatwallpapers.comOptimized: 960x540 JPEG - 34 KB
RECAP• JPEG: Photographs, complex colors, requires notransparency.• GIF: Simple, lo-res images. Solid colors, crispedges.•...
TEST YOURKNOWLEDGE!
SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define com...
4. OPTIMIZATION
RULE OF THUMB• Large images (full width of contentarea) should be kept to 60-100 KB• Smaller images should be closer to 30...
4A. PHOTOSHOP
View the video athttp://youtu.be/5fsvhPpewtM
OPTIMIZING JPEGSIN PHOTOSHOP• Add adjustment layers to reduce contrast and saturation (ifable)• File > Save for Web• Reduc...
4B. FIREWORKS
RIP FIREWORKS | 1998-2013
View the video athttp://youtu.be/EmrdjRs1Fds
4C. SPRITES
Source:http://images3.wikia.nocookie.net/__cb20110723180127/angrybirds/images/2/29/Angry_Birds_Sheet_Full.png
SPRITES• Origin: Old school computergraphics/video games• One file, multiple images• Intent: Display one part of thesprite...
BENEFIT OFSPRITES• Every single image (<img> tag or abackground-image from CSS) is a separateHTTP request.• Sprite = 1 HTT...
SPRITERESOURCES• CSS Sprites: What They Are, Why They’re Cool and HowTo Use Them (http://bit.ly/9IjWfD)• Spritepad: Create...
4D. ONLINECOMPRESSION TOOLS
SMUSH.IThttp://smush.it
OTHER ONLINE TOOLS• Kraken.io (http://kraken.io)• punypng (http://www.punypng.com)• JPEGmini (http://www.jpegmini.com)• In...
THOUGHTS• Avoid overuse of decorative images• Experiment! Testing is key.• In the words of Chris Schmitt, when namingfiles...
SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define com...
5. RESOURCES FORCONTINUED LEARNING
RESOURCES• WebPageTest (http://www.webpagetest.org)• Pagespeed (http://developers.google.com/speed/pagespeed)PAGE LOAD TES...
RESOURCES• CSS Sprites: What They Are, Why They’re Cool and How To Use Them (http://bit.ly/9IjWfD• Spritepad: Create CSS S...
SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define com...
TIMD’AGOSTINO• Marketing & CommunicationsManager, Penn State University• @729design
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Your Images are Weighing You Down: Optimization for a Better UX
Upcoming SlideShare
Loading in …5
×

Your Images are Weighing You Down: Optimization for a Better UX

848 views
734 views

Published on

Presented on June 7, 2013 under the Responsive Design/Mobile track at the Web 2013 Conference at Penn State.

Published in: Design, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
848
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Your Images are Weighing You Down: Optimization for a Better UX

  1. 1. HI, I’m Tim.• Marketing & CommunicationsManager, Penn State University• Introvert who happens tocommunicate (+ design andeverything in-between)• @729design
  2. 2. SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define common image filestypes for use on the web• Introduce basic optimization techniques• Resources for continued learning
  3. 3. 1. WHY ARE YOU DOINGTHIS TO ME?
  4. 4. Source: Web Conference
  5. 5. Source: http://www.getacoder.com/blog/wp-content/uploads/2012/05/slow_website_loading.jpg
  6. 6. Source: Keynote 2012 Mobile User Survey - keynote.com“HOW LONG DO YOUEXPECT TO WAIT?”
  7. 7. TAKEAWAYS• 74% of laptop/desktop users expect towait 3 seconds or less.• 60% of tablet users expect to wait 3seconds or less.• 56% of phone/smartphone users expect towait 4 seconds or longer.Source: Keynote 2012 Mobile User Survey - keynote.com
  8. 8. Source: Keynote 2012 Mobile User Survey - keynote.com“WHAT DO YOU DO IF THEWAIT IS TOO LONG?”MOBILE
  9. 9. SECOND CHANCE?
  10. 10. Source: Web Conference
  11. 11. Source: Keynote 2012 Mobile User Survey - keynote.com“WHAT DO YOU DO IF THEWAIT IS TOO LONG?”MOBILE
  12. 12. YOU HAVE 3 SECONDSTO CAPTURETHE USER.
  13. 13. FIRST IMPRESSIONSMATTER. PERIOD.
  14. 14. PERFORMANCE GOLDENRULE80-90% of the end-user response time isspent on the front end. Start there.
  15. 15. Source:http://yuiblog.com/blog/2006/11/28/performance-research-part-1/TIME SPENT LOADINGPOPULAR WEBSITES 2006
  16. 16. Source: http://www.webpagetest.orgTIME SPENT LOADINGPOPULAR WEBSITES 2013
  17. 17. SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define common image filestypes for use on the web• Introduce basic optimization techniques• Resources for continued learning
  18. 18. 2. MEASURING PAGELOAD TIME
  19. 19. WEBPAGETEST http://webpagetest.org
  20. 20. MORE ON HOW TO READWEBPAGETESTWebPagetest Documentation available at:http://bit.ly/18JLjEF
  21. 21. AGESPEED http://developers.google.com/speed/pagespeed
  22. 22. SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define common image filestypes for use on the web• Introduce basic optimization techniques• Resources for continued learning
  23. 23. 3. KNOW when to use THERIGHT FILE TYPE
  24. 24. • Used for photographs orimages with complexcolors.• Supports up to 16.7million colors• Able to be compressedconsiderably• Lossy - Degrades overmultiplesaves/compressionSource: sitepoint.com
  25. 25. • Low resolution images,solid colors• Crisp edges, no gradients• Limited to 256 colors• Transparency• Lossless - Maintainsquality when compressedSource: sitepoint.com
  26. 26. WHAT DO 8 AND24 MEAN?• Bits (Binary digits)• 1 bit = 2 colors (0, 1)• 2 bit = 4 colors (00, 01, 10, 11)• 8 bit = 256 colors (PNG-8)• 24 bit = 16,777,216 colors (PNG-24)Source: Designing Web & Mobile Graphics, Christopher Schmitt
  27. 27. Source: sitepoint.com• Low resolution images,solid colors• Crisp edges, no gradients• Limited to 256 colors• Transparency available• Lossless - Maintainsquality when compressed• i
  28. 28. • Images with dropshadows/glows, softedges, gradients thatrequire transparency• Tend to be larger filesizes• Lossless - Maintainsquality when compressedSource: sitepoint.com
  29. 29. Source: funnycatwallpapers.comOriginal Size: 1920x1080 - 1.5 MB
  30. 30. Source: funnycatwallpapers.comOptimized: 960x540 GIF - 34 KB
  31. 31. Source: funnycatwallpapers.comOptimized: 960x540 PNG - 34 KB
  32. 32. Source: funnycatwallpapers.comOptimized: 960x540 JPEG - 34 KB
  33. 33. RECAP• JPEG: Photographs, complex colors, requires notransparency.• GIF: Simple, lo-res images. Solid colors, crispedges.• PNG-8: Simple, lo-res images. Solid colors, crispedges.• PNG-24: Images with drop shadows/glows,gradients, soft edges that require transparency.
  34. 34. TEST YOURKNOWLEDGE!
  35. 35. SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define common image filestypes for use on the web• Introduce basic optimization techniques• Resources for continued learning
  36. 36. 4. OPTIMIZATION
  37. 37. RULE OF THUMB• Large images (full width of contentarea) should be kept to 60-100 KB• Smaller images should be closer to 30KB and lowerSource: http://codex.wordpress.org/Image_Size_and_Quality
  38. 38. 4A. PHOTOSHOP
  39. 39. View the video athttp://youtu.be/5fsvhPpewtM
  40. 40. OPTIMIZING JPEGSIN PHOTOSHOP• Add adjustment layers to reduce contrast and saturation (ifable)• File > Save for Web• Reduce image pixel size to size that you need• Start quality at 85 and work from there.• Add blur (if able)• “Optimization” & “Convert to sRGB” checked
  41. 41. 4B. FIREWORKS
  42. 42. RIP FIREWORKS | 1998-2013
  43. 43. View the video athttp://youtu.be/EmrdjRs1Fds
  44. 44. 4C. SPRITES
  45. 45. Source:http://images3.wikia.nocookie.net/__cb20110723180127/angrybirds/images/2/29/Angry_Birds_Sheet_Full.png
  46. 46. SPRITES• Origin: Old school computergraphics/video games• One file, multiple images• Intent: Display one part of thesprite at any given timeSource:http://images3.wikia.nocookie.net/__cb20110723180127/angrybirds/images/2/29/Angry_Birds_Sheet_Full.png
  47. 47. BENEFIT OFSPRITES• Every single image (<img> tag or abackground-image from CSS) is a separateHTTP request.• Sprite = 1 HTTP request• Less HTTP requests = faster load timeSource: http://css-tricks.com/css-sprites/
  48. 48. SPRITERESOURCES• CSS Sprites: What They Are, Why They’re Cool and HowTo Use Them (http://bit.ly/9IjWfD)• Spritepad: Create CSS Sprites Online (http://bit.ly/w7x9EM)• CSS Sprite Sheets: Best Practices, Tools and HelpfulApplications (http://bit.ly/SVaD56)
  49. 49. 4D. ONLINECOMPRESSION TOOLS
  50. 50. SMUSH.IThttp://smush.it
  51. 51. OTHER ONLINE TOOLS• Kraken.io (http://kraken.io)• punypng (http://www.punypng.com)• JPEGmini (http://www.jpegmini.com)• Inline images
  52. 52. THOUGHTS• Avoid overuse of decorative images• Experiment! Testing is key.• In the words of Chris Schmitt, when namingfiles, do so with a purpose. (Designing Web &Mobile Graphics)• When posting images, don’t forget alt tags!
  53. 53. SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define common image filestypes for use on the web• Introduce basic optimization techniques• Resources for continued learning
  54. 54. 5. RESOURCES FORCONTINUED LEARNING
  55. 55. RESOURCES• WebPageTest (http://www.webpagetest.org)• Pagespeed (http://developers.google.com/speed/pagespeed)PAGE LOAD TESTING• Clever JPEG Optimization (http://bit.ly/12hJsJ)• Clever PNG Optimization, Part 1 (http://bit.ly/8EH0J)• Clever PNG Optimization, Part 2 (http://bit.ly/DNyW2)IMAGE OPTIMIZATION
  56. 56. RESOURCES• CSS Sprites: What They Are, Why They’re Cool and How To Use Them (http://bit.ly/9IjWfD• Spritepad: Create CSS Sprites Online (http://bit.ly/w7x9EM)• CSS Sprite Sheets: Best Practices, Tools and Helpful Applications (http://bit.ly/SVaD56)SPRITES• Smush.it (http://smush.it)• Kraken.io (http://kraken.io)• punypng (http://www.punypng.com)• JPEGmini (http://www.jpegmini.com)ONLINE IMAGE OPTIMIZATION TOOLS
  57. 57. SESSIONOBJECTIVES• Discuss why it is important to optimize• Discover how to measure page loadtime• Identify and define common image filestypes for use on the web• Introduce basic optimization techniques• Resources for continued learning
  58. 58. TIMD’AGOSTINO• Marketing & CommunicationsManager, Penn State University• @729design

×