Tech Talk #2: Optimize Images For Web Site/App Performance
1 like696 views
The document discusses the importance of optimizing images for website and app performance, emphasizing its impact on loading speed, Google search ranking, and potential revenue loss. It provides methods for improving loading speed, such as minifying resources, lazy loading, and using WebP format for images, which can significantly reduce file sizes. Additionally, it includes practical examples and tools for implementing these optimizations.
Tech Talk #2: Optimize Images For Web Site/App Performance
- 1. OPTIMIZE IMAGES FOR WEB SITE / APP PERFORMANCE TAKAAKI MIZUNO
- 2. WEB SITE LOADING SPEED IS VERY IMPORTANT
- 3. テキスト WEB SITE LOADING SPEED IS IMPORTANT ▸ Web site loading speed affect to the Google web search ranking
- 4. テキスト WEB SITE LOADING SPEED IS IMPORTANT ▸ Web site loading speed affect to the revenue of EC site ▸ One Second Could Cost Amazon $1.6 Billion In Sales Per Year
- 5. テキスト HOW TO MAKE THE RESPONSE FASTER ▸ Minify HTML/CSS/JS ▸ Combine CSS/JS*1 ▸ Multi Subdomains for images*1 ▸ Resize Images ▸ Set HTTP cache headers properly ▸ Lazy Loading ▸ Use HTTP/2 *1 It is not effective when you are using HTTP/2
- 6. テキスト YOU CAN CHECK YOUR PAGE WITH Google Page Speed Insights https://developers.google.com/speed/pagespeed/insights/
- 7. REDUCE IMAGE SIZE WITHOUT ANY CHANGES
- 8. テキスト WHY OPTIMIZE IMAGE ▸ You can do it TODAY ▸ Really effective
- 9. PNG
- 10. テキスト PNG ▸ Never uses full color PNG images ( 24bit / 32bit ) ▸ Change to Index Colored PNG with pngquant ▸ Optimize color index with pngrewrite ▸ Optimize deflete compression with AdvanceCOMP You Can Reduce Image File Size 20%~
- 11. JPEG
- 12. テキスト JPEG ▸ Use mozjpeg to optimize Jpeg Images You Can Reduce Image File Size 20%~
- 13. WEBP
- 14. テキスト WEBP ▸ WebP is the Jpeg/PNG alternative image format by Google ▸ Size of image will be 25~34% of Jpeg image ▸ Supported OS/Browsers ▸ Android 4.0~ ▸ iOS ( SDWebImage library ) ▸ Chrome ▸ IE/Safari/Firefox don’t support You Can Reduce Image File Size 60%~
- 15. テキスト HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT Accept:image/webp,image/*,*/*;q=0.8 Check Accept HTTP Request Header
- 16. テキスト DEMO
- 17. REAL EXAMPLE
- 18. テキスト FOODY.VN
- 19. テキスト ORIGINAL WEB DATA SIZE 5.9MB html% css% js% img% other% Image 52% 3,1MB
- 20. テキスト PNG & JPEG OPTIMIZATION SIZE 5.1MB ( REDUCE 9.2% ) html% css% js% img% other% Image 47% 2,6MB 18% Image Size Reduced
- 21. テキスト JPEG TO WEBP SIZE 4.7MB ( REDUCE 17,4% ) html% css% js% img% other% Image 42% 2.1MB 33.3% Image Size Reduced
- 22. テキスト JPEG,PNG,GIF TO WEBP SIZE 4.5MB ( REDUCE 21.1% ) html% css% js% img% other% Image 42% 1.9MB 40.1% Image Size Reduced
- 23. テキスト DEMO
- 24. テキスト USE IMAGE RESIZING PROXY https://github.com/cubicdaiya/ngx_small_light ngx_small_light
- 25. テキスト JUST CHANGE THE IMAGE URL http://$host:$port/small_light(dw=300,dh=300)/img/image.jpg http://$host:$port/img/image.jpg
- 26. テキスト Thank You!