Top 10 mistakes in handling website images and how to solve them

Reference: Top 10 mistakes in handling website images and how to solve them

挺不錯的整理，也把一些觀念一次釐清
還有說明做法~ 值得讀一下
以下簡述重點，詳細就看原作吧

1. Wasteful browser-side resizing
   最好與指定的大小一樣大，不要靠browser自動縮放
2. Unnecessarily high quality JPEGs
   85%與95% JPEG看起來不多，但前者17KB，後者要34KB 
3. Incorrect image file types
   JPEG: 適用風景圖，只要15KB，PNG卻要110KB
   PNG: 適用圖表charts, logos，有留白的那種
   GIF: 小動畫
4. Delivering non-optimized images
   PNG可適度壓縮，讓檔案小50%
5. Forgetting to strip image meta-data
   meta-data可能夾太多無用資訊，可以清掉省空間。
6. Delivering images straight from your servers
   透過CDN加速。
7. Delivering static icons one by one
   小的icons應該併成大張圖一起交付。
8. Using images when CSS3 can be used
   不要用圖做button的圓角或mouseover的效果，可以透過CSS達成。
9. Incorrect image cache settings
   圖片幾乎不會變，也就是說cache不需失效，但如果真的會變，可以透過fingerprint改變，就是url加上version之類的字串。
10. Using a single image size across all delivery mediums
    利用JavaScript判斷device的解淅度，再讀取適當大小的圖