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.
Recommended
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (11)
Similar to Tech Talk #2: Optimize Images For Web Site/App Performance
Similar to Tech Talk #2: Optimize Images For Web Site/App Performance (20)
More from Nexus FrontierTech
More from Nexus FrontierTech (20)
Recently uploaded
Recently uploaded (20)
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!