點陣圖

一、 jpg(jpeg)

它是一種有損的壓縮圖檔，經過壓縮後即為不可逆的狀態，且經過壓縮後會降低圖片的畫質

jpg的好處：

• 能夠以較小的檔案大小提供圖片
• 幾乎被所有主流的瀏覽器和圖像編輯工具支援

jpg的缺點

• 圖片經過壓縮，會導致畫質有損失，特別是在重複保存圖片的狀況下會更加顯著
• jpg圖檔不支援透明背景

二、 png

png是一種無損的圖片檔，經過壓縮後不會破壞原本圖片的畫質，並且支援透明背景，但png比jpg的檔案大小還要大

png的好處

• 支援透明背景的圖片，如果要有趣被效果的圖片，會是使用png，而不是jpg
• png圖檔壓縮後不會破壞圖片畫質，適合使用比較精細的圖片上

png的壞處

• 檔案大小比jpg還要大，特別是在大圖片上

三、 webP

WebP 是由 Google 開發的圖片格式，希望以更小的檔案大小提供高品質的圖片，webP同時支援有損、無損的圖片檔。
對於有損壓縮，WebP 通常提供比 JPG 更小的檔案大小，並且保持相似或更好的圖片品質
對於無損壓縮，WebP 通常提供比 PNG 更小的檔案大小

webP的好處

• 支援透明背景，和 JPG 不同，這讓webP成為一個很好的選擇，用於需要透明背景的圖片
• 支援動畫，可以用來替代 GIF 格式，提供更小的檔案大小和更好的畫質
• 無損和有損壓縮選項，讓使用者可以根據需求來選擇

webP的缺點

• 瀏覽器兼容性尚未全面普及，儘管大部分瀏覽器都支援 WebP，但一些舊版瀏覽器和某些行動裝置瀏覽器可能不支援
• 編輯工具的支援有限，目前並沒有所有的圖片編輯器都支援 WebP 格式

向量圖

一、 svg

SVG 是一種使用XML的向量圖，由數學公式去繪製出的圖片，表示 SVG 這類向量圖檔可以大幅調整尺寸卻不會破壞畫質，因此很適合用於標誌及複雜的線上圖形，目前大多數瀏覽器都原生支援 SVG 格式

svg的好處

• 無限縮放且不失真，作為一種向量圖形，SVG 可以無限放大而不失真，非常適合用於製作圖標、標誌和其他需要在不同大小下使用的圖形
• 檔案大小相對較小，對於簡單的圖形，SVG 通常有更小的檔案大小
• SVG 檔案將文字視為文字 (而非設計) 處理，因此螢幕閱讀程式可以掃描 SVG 影像包含的任何文字，這對於閱讀網頁需要幫助的使用者來說非常有用

svg的壞處

• 對於高度複雜或照片等圖像，使用點陣圖像格式（如 JPG 或 PNG）可能更適合
• 只有現代瀏覽器支援 SVG 影像，SVG 檔案很難用再 Internet Explorer 8 和其他較舊的瀏覽器

jpg、png、webP 選擇哪一種比較好？

用哪一種圖片特是還是要取決於使用需求，如果對於圖片畫質有損壞比較沒關係，可以選擇用jpg格式，檔案大小也會比png小，如果圖片比較精細，而且經過壓縮後畫質不想要被破壞，或是圖片需要有透明背景效果，用png會比較合適，也因為webP格式的推出，且大部分瀏覽器已經有支援了，且使用webP不論在有損或無損的情況下，檔案都可以更小，傳輸上速度會比較快，因此在理想的情況下，可以直接使用webP是沒有問題的

svg無限縮放不失真，為什麼複雜圖片會不適合使用

SVG 它是用數學公式來描述圖像的，代表它非常適合用於製作圖標、標誌、圖表和其他簡單或抽象的圖形，因為這些圖形可以用數學公式來表示，但是當照片或其他複雜的圖片時，這些圖片通常包含大量的細節和顏色，這些很難用數學公式來精確計算出來

參考文章
前端圖片格式選擇，什麼時候該用JPG、 PNG、WebP 或 SVG 呢?
SVG 檔案