想要研究一下圖片優化是因為，先前公司會將所有照片資源放到專案內的/public/photo資料夾，網站上要使用的圖片不論是要選用1x / 2x / 3x或是要用jpeg / png /svg 都是非常隨意且沒有限制的，打包過後圖片資源也佔據不少空間，即便是很小型的專案。但是，圖片往往是在網站中佔比較多的資源，趁著這次有機會負責公司產品優化，決定來記錄一下過程。
了解圖片的各種格式
不同檔案格式有各自適合使用的場景
若可用簡易Css處理的畫面也可以思考看看是否需要使用到圖片
點陣圖 — JPEG / PNG / WebP ，是由一個一個小點組成
JPEG：採用有損壓縮，當你編輯或儲存時都會失去資料，損害檔案品質。
PNG ：採用無損壓縮，在壓縮後不影響圖片的質量，不過檔案會比 JPG 大。 同時 PNG 是可以有透明背景。
WebP：它可以是有損壓縮，也可以是無損壓縮。而其特點是有損壓縮的檔案比 JPG 更小，無損壓縮的檔案比 PNG 更小。
這三種檔案類型該如何選擇？
WebP應該是首選，不但檔案更小也支援透明背景，以前可能會有支援度問題，現在基本上大多數瀏覽器已經支援WebP。JPEG & PNG如果使用情境是不太在乎畫質的，那 JPG 會好一點，因為檔案比較小；但假如要不影響原本畫質，或是需要把圖片去背，則 PNG 會比 JPG 適合。
補充：
WebP & WebM都支援動畫，WebM可使用<video>用播放器播放。
檔案大小也都比GIF小很多，可用來替代GIF動圖。
向量圖 — SVG ，是由數學公式計算繪製而成。
SVG：被計算出來的好處是，向量圖在被放大時，不會失真。
點陣圖 ＆ 向量圖該如何選擇？
若是需要展示很多顏色跟形狀的照片或是圖片那就較為適合使用點陣圖，因為使用SVG呈現這樣的圖片時檔案大小就會較大，但若是顏色較為單一的圖片又希望它放大後不會失真的話就適合使用SVG，舉例來說，像是LOGO或是icon類型的圖片。
