圖片最佳化 | 前端效能優化
【shout out to 莫力全✨今晚，我想來點 Web 前端效能優化大補帖！】
讀後重點整理 & 重述 & 一點點自己的補充
幾乎所有的網站都一定會用到圖片和 icon，甚至可能會需要載入大量的圖片，它們也是網站中佔比最多的資源，所以透過優化這些圖片資源，就可能帶來很大的效能提升。能用 CSS 做到就用 CSS，不要輕易使用耗費大量資源的圖片君。
不同圖片格式使用時機
JPEG ＆ PNG
它們是由像素陣列（Pixel Array）來表示的圖像，檔案大小較大，耗能較高。
這時候就會想問，耗能很高怎麼辦~~~
就跟我們棉被衣服太厚，很佔空間怎麼辦是一樣的解法：壓縮它就對了！圖片壓縮後大小就變小囉。有的公司會建立自己的圖片壓縮服務，或是使用 webpack 等 module bundler 來將壓縮整合到開發流程裡，或是使用線上平台。但先別急著開始壓縮！
壓縮前先看看特點跟使用時機：
JPG
- 有損壓縮，會降低圖片的質量，壓縮後是不可逆的。
- 相同條件下的 JPG 比 PNG 小。
- 非常大的背景圖片，會選擇使用 JPG，檔案小了許多，實際上的視覺品質也不會差異太大，但要考量下面提到的 PNG 第 2 點。
PNG
- 無損壓縮，壓縮後不影響圖片品質。
- PNG 在處理含有文字、線條和輪廓較為明顯的影像表現較好。
- 如果圖檔未來會一直有更改需求的，使用 PNG，因 JPG 每次修改儲存後可能會導致圖片品質越來越差。
SVG (Scalable Vector Graphics)
向量圖
- 放大多少都不會變模糊。
- 比點陣圖還要小。
- SVG 可以透過 Gzip 壓縮。
- 最小化優化工具
建議優先使用 SVG 的情境，例如：企業的 Icon、圖表、圖示...等。而 PNG 與 JPG 等點陣圖其實也可以轉為向量圖，但並不是所有的點陣圖都適合轉檔，比較適合的情境有：
- 主要由幾何圖形組成的圖片
- 較小的圖片 （長x寬）
- 不希望產生圖片失真、邊緣會有點模糊的狀況
WebP
- 檔案大小比 PNG 與 JPG 小很多，多數情況都更推薦用 WebP。
- 支援動圖，常見的 GIF 也可以轉為 WebP 並且獲得更小的體積。
- 支援度高：現代的網頁瀏覽器，幾乎都支援 WebP。
Responsive Image 響應式圖片
網頁要響應式設計 (RWD)，圖片也需要響應式。響應式圖片的概念就跟 RWD 很像，我們需要依照裝置的變化，調整版面 (圖片)。如果一張圖片用到底，有可能長寬比失衡或解析度失真。另外，如果在小尺寸的裝置下載非常大尺寸的照片，除了會增加 page load time，瀏覽器也會為了縮小大圖而耗費性能。這時候就需要依據不同的瀏覽器視窗大小、裝置解析度，呈現對應大小的圖片。
同一張圖分為 1x、2x、3x 總共三個版本，1x~3x 代表的是圖片解析度，不同裝置需要依照不同的 DPR (device pixel ratio，詳細介紹查看連結文章) 來呈現尺寸適合的圖片。
實際上我的專題該怎麼去處理 1x 2x 3x 這個問題，目前還在嘗試中...
資料來源
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在數位時代，網頁設計不僅是美學，更是企業成功的關鍵，一個出色的網站能讓您的品牌在競爭中脫穎而出，設計一個令人驚艷的網站不僅僅是選擇漂亮的圖片和顏色，而是涉及到深思熟慮的佈局和直觀的導航。
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
隨著數位時代的快速發展，擁有一個出色的網站已成為企業和個人成功的不可或缺之一。然而，僅僅擁有一個網站不足以保持競爭力。
分享八款免費高解析度、無版權和商業使用的圖片網站，提供豐富多樣的圖片素材，從風景、人物等類型滿足各種需求。使用這些免費且商用的圖片，讓創作有更豐富的視覺呈現，增加專業度和吸引力。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在數位時代，網頁設計不僅是美學，更是企業成功的關鍵，一個出色的網站能讓您的品牌在競爭中脫穎而出，設計一個令人驚艷的網站不僅僅是選擇漂亮的圖片和顏色，而是涉及到深思熟慮的佈局和直觀的導航。
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
隨著數位時代的快速發展，擁有一個出色的網站已成為企業和個人成功的不可或缺之一。然而，僅僅擁有一個網站不足以保持競爭力。
分享八款免費高解析度、無版權和商業使用的圖片網站，提供豐富多樣的圖片素材，從風景、人物等類型滿足各種需求。使用這些免費且商用的圖片，讓創作有更豐富的視覺呈現，增加專業度和吸引力。