Optimize images for web site / app performance
0 likes265 views
The document discusses the importance of optimizing images for website and app performance, highlighting effects on loading speed, Google search rankings, and revenue. Techniques such as minifying files, resizing images, and using formats like WebP can significantly reduce image sizes and improve loading times. Real examples demonstrate tangible size reductions in images through various optimization methods.
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 ▸ CSS Sprite ▸ 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% ) 342283 html% css% js% img% other% Image 47% 2,6MB 18% Image Size Reduced
- 21. テキスト JPEG TO WEBP SIZE 4.7MB ( REDUCE 17,4% ) 342283 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% ) 342283 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!