Image Optimization

Image Optimization

Transcript

1. Image Optimization Jared Potter - Software Engineer
2. Slides Available (also available at end) Slides: https://goo.gl/Nz6Dp5
3. Who Am I - Jared Potter
4. Talk Expectations What this talk isn’t • Nitty gritties on image optimization What this talk is • Really simple tools to optimize images / gifs
5. • Un-optimized images litter the web. • Increased load times (especially on slower mobile connections). • Increase data cost (again, to mobile). • Note: initial load only. Images will be cached. The Problem
6. Click me Example 1 - Photo Portfolio
7. Example 1 - Photo Portfolio Cont
8. Example 2 - Dev Portfolios
9. Example 2 - Dev Portfolios Cont
10. Example 3 - Coding Bootcamp - GIF
11. Example 3 - Coding Bootcamp - GIF
12. • Native tools (Mac Preview, Windows 10 Photo App) • Online tools (Bulk Image Resize) • 3rd party apps (JPEGmini) ◦ Server, JS uploader, SDKs • Convert .GIFs to .MP4s • Convert .PNGs to .JPEGs The Solution
13. • Mac Preview - DEMO Native Solutions
14. A
15. B
16. • Single background image jpeg ◦ Reduced from 11.1 MB to 3.5 MB (68% reduction) Native Solutions - Mac Preview
17. • PNGs to JPEGs ◦ 41.4 MBs to 2.4 MBs (94% reduction) Native Solutions - Mac Preview
18. • Windows 10 Photo App Native Solutions
19. Web Solutions - Bulk Image Resizer
20. 3rd Party Solutions - JPEGmini (paid)
21. A
22. B
23. GIF to MP4 FFMPEG Reduced GIF from 49,175,027 bytes to 812,646 bytes ~98% Reduction! Instant loading gifs. Already done by imgur, giphy, gfycat, etc
24. Other Photo Optimization Tips • Lazy Load your images ◦ https://github.com/juanlizarazo /image-lazy-load-demos • Upcoming WebP (picture) and WebM (video) ◦ Both open source, royalty free (compared to h.264/h.265) ◦ Hybrid support webp/webm for chrome, optimized jpeg / gifs (mp4) for other browsers
25. Thank You!
26. Resources • https://medium.com/@jaredpotter1/optimizi ng-images-for-the-web-part-1-aa88c1c6d80e • https://github.com/juanlizarazo/image-lazy-l oad-demos • https://unix.stackexchange.com/questions/4 0638/how-to-do-i-convert-an-animated-gif-t o-an-mp4-or-mv4-on-the-command-line • https://rigor.com/blog/2015/12/optimizing-ani mated-gifs-with-html5-video
27. Questions? Slides: https://goo.gl/Nz6Dp5 Contact + Feedback • Email: jaredpotter1@gmail.com • https://twitter.com/jaredpotter