Tech Talk #2: Optimize Images For Web Site/App Performance
•
1 like•689 views
Sharing from Takaaki Mizuno - CEO & CTO at Innovatube (http://innovatube.com) : CTO có 20 năm kinh nghiệm cho nhiều công ty tại Nhật và khu vực ĐNA, như Dena Nhật Bản, Dena Hanoi, Baidu, Allied Architects.
Report
Share
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!