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

2. HI, I’m Tim.
• Marketing & Communications
Manager, Penn State University
• Introvert who happens to
communicate (+ design and
everything in-between)
• @729design

16. SESSION
OBJECTIVES• Discuss why it is important to optimize
• Discover how to measure page load
time
• Identify and define common image files
types for use on the web
• Introduce basic optimization techniques
• Resources for continued learning

17. 1. WHY ARE YOU DOING
THIS TO ME?

18. Source: Web Conference

19. Source: http://www.getacoder.com/blog/wp-
content/uploads/2012/05/slow_website_loading.jpg

20. Source: Keynote 2012 Mobile User Survey - keynote.com
“HOW LONG DO YOU
EXPECT TO WAIT?”

21. TAKEAWAYS
• 74% of laptop/desktop users expect to
wait 3 seconds or less.
• 60% of tablet users expect to wait 3
seconds or less.
• 56% of phone/smartphone users expect to
wait 4 seconds or longer.
Source: Keynote 2012 Mobile User Survey - keynote.com

23. Source: Keynote 2012 Mobile User Survey - keynote.com
“WHAT DO YOU DO IF THE
WAIT IS TOO LONG?”MOBIL
E

24. SECOND CHANCE?

25. Source: Web Conference

26. Source: Keynote 2012 Mobile User Survey - keynote.com
“WHAT DO YOU DO IF THE
WAIT IS TOO LONG?”MOBIL
E

29. YOU HAVE 3 SECONDS
TO CAPTURE
THE USER.

32. FIRST IMPRESSIONS
MATTER. PERIOD.

33. PERFORMANCE GOLDEN
RULE
80-90% of the end-user response time is
spent on the front end. Start there.

34. Source:
http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
TIME SPENT LOADING
POPULAR WEBSITES 2006

35. Source: http://www.webpagetest.org
TIME SPENT LOADING
POPULAR WEBSITES 2013

36. SESSION
OBJECTIVES• Discuss why it is important to optimize
• Discover how to measure page load
time
• Identify and define common image files
types for use on the web
• Introduce basic optimization techniques
• Resources for continued learning

37. 2. MEASURING PAGE
LOAD TIME

38. WEBPAGETEST http://webpagetest.org

42. MORE ON HOW TO READ
WEBPAGETEST
WebPagetest Documentation available at:
http://bit.ly/18JLjEF

43. AGESPEED http://developers.google.com/speed/pagespeed

46. SESSION
OBJECTIVES• Discuss why it is important to optimize
• Discover how to measure page load
time
• Identify and define common image files
types for use on the web
• Introduce basic optimization techniques
• Resources for continued learning

47. 3. KNOW when to use THE
RIGHT FILE TYPE

48. • Used for photographs or
images with complex
colors.
• Supports up to 16.7
million colors
• Able to be compressed
considerably
• Lossy - Degrades over
multiple
saves/compression
Source: sitepoint.com

49. • Low resolution images,
solid colors
• Crisp edges, no gradients
• Limited to 256 colors
• Transparency
• Lossless - Maintains
quality when compressed
Source: sitepoint.com

51. WHAT DO 8 AND
24 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

52. Source: sitepoint.com
• Low resolution images,
solid colors
• Crisp edges, no gradients
• Limited to 256 colors
• Transparency available
• Lossless - Maintains
quality when compressed
• i

53. • Images with drop
shadows/glows, soft
edges, gradients that
require transparency
• Tend to be larger file
sizes
• Lossless - Maintains
quality when compressed
Source: sitepoint.com

54. Source: funnycatwallpapers.com
Original Size: 1920x1080 - 1.5 MB

55. Source: funnycatwallpapers.com
Optimized: 960x540 GIF - 34 KB

56. Source: funnycatwallpapers.com
Optimized: 960x540 PNG - 34 KB

57. Source: funnycatwallpapers.com
Optimized: 960x540 JPEG - 34 KB

58. RECAP
• JPEG: Photographs, complex colors, requires no
transparency.
• GIF: Simple, lo-res images. Solid colors, crisp
edges.
• PNG-8: Simple, lo-res images. Solid colors, crisp
edges.
• PNG-24: Images with drop shadows/glows,
gradients, soft edges that require transparency.

59. TEST YOUR
KNOWLEDGE!

66. SESSION
OBJECTIVES• Discuss why it is important to optimize
• Discover how to measure page load
time
• Identify and define common image files
types for use on the web
• Introduce basic optimization techniques
• Resources for continued learning

67. 4. OPTIMIZATION

68. RULE OF THUMB
• Large images (full width of content
area) should be kept to 60-100 KB
• Smaller images should be closer to 30
KB and lower
Source: http://codex.wordpress.org/Image_Size_and_Quality

69. 4A. PHOTOSHOP

71. View the video at
http://youtu.be/5fsvhPpewtM

72. OPTIMIZING JPEGS
IN PHOTOSHOP• Add adjustment layers to reduce contrast and saturation (if
able)
• 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

74. 4B. FIREWORKS

76. RIP FIREWORKS | 1998-
2013

78. View the video at
http://youtu.be/EmrdjRs1Fds

79. 4C. SPRITES

81. Source:
http://images3.wikia.nocookie.net/__cb20110723180127/angrybirds/i
mages/2/29/Angry_Birds_Sheet_Full.png

82. SPRITES
• Origin: Old school computer
graphics/video games
• One file, multiple images
• Intent: Display one part of the
sprite at any given time
Source:
http://images3.wikia.nocookie.net/__cb20110723180127/angrybirds/i
mages/2/29/Angry_Birds_Sheet_Full.png

83. BENEFIT OF
SPRITES• Every single image (<img> tag or a
background-image from CSS) is a separate
HTTP request.
• Sprite = 1 HTTP request
• Less HTTP requests = faster load time
Source: http://css-tricks.com/css-sprites/

85. SPRITE
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)

86. 4D. ONLINE
COMPRESSION TOOLS

87. SMUS
H.IT
http://smush.it

88. OTHER ONLINE TOOLS• Kraken.io (http://kraken.io)
• punypng (http://www.punypng.com)
• JPEGmini (http://www.jpegmini.com)
• Inline images

89. THOUGHTS
• Avoid overuse of decorative images
• Experiment! Testing is key.
• In the words of Chris Schmitt, when naming
files, do so with a purpose. (Designing Web &
Mobile Graphics)
• When posting images, don’t forget alt tags!

90. SESSION
OBJECTIVES• Discuss why it is important to optimize
• Discover how to measure page load
time
• Identify and define common image files
types for use on the web
• Introduce basic optimization techniques
• Resources for continued learning

91. 5. RESOURCES FOR
CONTINUED LEARNING

92. 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

93. 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

94. SESSION
OBJECTIVES• Discuss why it is important to optimize
• Discover how to measure page load
time
• Identify and define common image files
types for use on the web
• Introduce basic optimization techniques
• Resources for continued learning

95. TIM
D’AGOSTINO
• Marketing & Communications
Manager, Penn State University
• @729design