This document discusses how to optimize web content, especially images, to improve performance and accessibility. It provides statistics on how images make up a large portion of web page sizes and explains common image formats. Optimization techniques are suggested like using responsive images, compression tools, and content delivery networks. The document stresses considering performance and accessibility throughout the design and development process from user research to deployment. Improving assets at their source and removing blocking elements can enhance the user experience.

1. HOW TO TRAIN YOUR
WEB CONTENT
So it doesn't slow you down...

2. WHAT’S IN
AN IMAGE?Quite a lot as it turns out

3. Large hero images
are everywhere
(sometimes they’re autoplay videos)

4. 100
Mbps
Retina Display
Fast CPU

5. Average Bytes per Content Type
2011
Other
5kbFonts
1kbImages
228kb
Scripts
80kb
HTML
42kb
Stylesheets
20kb
Source: https://httparchive.org/
376kb
60%
21%
5%

6. Video
57kb
Other
5kb
Fonts
116kb
Images
1813kb
Scripts
471kb
HTML
45kb
Stylesheets
106kb
Average Bytes per Content Type
2019
Source: https://httparchive.org/
2613kb
69%
18%
4%

7. CSS
JS
fonts
images
Who’s responsible?

8. GIF (1987)
JPEG (1992)
PNG (1996)
SVG (1998-2008)
The most common image formats on the web
2019

9. First image on the web
1992

10. Pace Layering
Images
With thanks to
Jeremy Keith

11. Video
formats on
the web
H.261 (1984, 1988)
MPEG-1 (1988-1991)
MPEG-2 H.263 (1996-2015)
MPEG-4 H.264 (1999-current)
HEVC H.265 (2015 - current)
VP8
VP9
Ogg Vorbis
DIVX
3IVX
Sorenson
Real

12. THE
ALTERNATIVES

13. Image formats
WebP

14. Image formats
WebP

15. Other
1%
GIF
20%
SVG
3%
WebP
1%
PNG
30%
JPG
45%
Image requests by format
2019
Source: https://httparchive.org/

16. Image formats
WebP

17. Image formats
JPEG XR

18. Image formats
JPEG XR

19. Optimisation Tools
ImageOptim

20. PERFORMANCE
AND USER
EXPERIENCE
We hate to wait

21. Is it happening?
First Paint (FP) /
First Contentful Paint (FCP)
Is it useful?
First Meaningful Paint (FMP) /
Hero Element
Timing
Is it usable?
Time to Interactive (TTI)

23. Critical
Path
CSS
JS
fonts
images

24. Performance

25. PERFORMANCE
AND
ACCESSIBILITY
How issues are amplified

26. "Disability is an amplifier: a usability issue that slows a
person down by 5 seconds might actually become a
complete blocker for someone with a disability.”
Derek Featherstone
Simply Accessible
@feather

27. The most important thing
to consider is the User
Experience rather just
checking items off a
checklist
Alt tags
Color contrast
ARIA Roles

28. There is also the legislation
to consider…
Section 508
Section 255
ADA

29. https://twitter.com/jmspool/status/884117945999380481

30. Web Accessibility

32. When do we start thinking about
Performance & Accessibility?

33. When do we start thinking about
Performance & Accessibility?
Who’s responsible?

34. User
Research
Information
Architecture
Content
Strategy
Interaction
Design
Development
Web Accessibility
Accessibility
Performance

35. IMPROVING
PERFORMANCE
AT SOURCE
Look, no server!

36. Improve
performance with
CDN use

38. “Serverless” image
manipulation on the
fly

39. “Serverless” image
manipulation on the
fly

41. 374kb

42. 374kb
33kb
320w
91kb
600w
176kb
900w
273kb
1200w

43. CONCLUSION

44. Take Aways
Benefits

45. ✓ Improves user experience and accessibility
✓ Lowers bandwidth costs
Take Aways
Benefits

46. Take Aways
Checklist

47. ✓ Choose the right format
✓ Optimise your images (locally or online)
✓ Make sure there’s no blocks (scripts etc.)
✓ Use a CDN
✓ Optimise on the site
Take Aways
Checklist