圖片最佳化 | 前端效能優化

阿榮-avatar-img
發佈於前端
更新於 發佈於 閱讀時間約 3 分鐘
【shout out to 莫力全✨今晚,我想來點 Web 前端效能優化大補帖!
讀後重點整理 & 重述 & 一點點自己的補充

幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。能用 CSS 做到就用 CSS,不要輕易使用耗費大量資源的圖片君。


不同圖片格式使用時機

JPEG & PNG

它們是由像素陣列(Pixel Array)來表示的圖像,檔案大小較大,耗能較高。

這時候就會想問,耗能很高怎麼辦~~~
就跟我們棉被衣服太厚,很佔空間怎麼辦是一樣的解法:壓縮它就對了!圖片壓縮後大小就變小囉。有的公司會建立自己的圖片壓縮服務,或是使用 webpack 等 module bundler 來將壓縮整合到開發流程裡,或是使用線上平台。但先別急著開始壓縮!


壓縮前先看看特點跟使用時機:

JPG

  1. 有損壓縮,會降低圖片的質量,壓縮後是不可逆的。
  2. 相同條件下的 JPG 比 PNG 小。
  3. 非常大的背景圖片,會選擇使用 JPG,檔案小了許多,實際上的視覺品質也不會差異太大,但要考量下面提到的 PNG 第 2 點。

PNG

  1. 無損壓縮,壓縮後不影響圖片品質。
  2. PNG 在處理含有文字、線條和輪廓較為明顯的影像表現較好。
  3. 如果圖檔未來會一直有更改需求的,使用 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 這個問題,目前還在嘗試中...

資料來源


留言
avatar-img
留言分享你的想法!
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/15
2024/04/15
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
在今日數位世界中,良好設計的網站已經成為必需品。 瞭解網站設計的重要性,特別是對於第一印象和信任度。 這篇文章提供了選擇網站設計服務的實用指南,包括網站設計的重要性,基礎知識和選擇服務提供者的提示。
Thumbnail
在今日數位世界中,良好設計的網站已經成為必需品。 瞭解網站設計的重要性,特別是對於第一印象和信任度。 這篇文章提供了選擇網站設計服務的實用指南,包括網站設計的重要性,基礎知識和選擇服務提供者的提示。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
最近發現有很多的網站的做法都是先找到某個不錯的關鍵字,然後直接用關鍵字當作網域名稱。 接著把網站首頁作為主要頁面,然後其他頁面圍繞著相同主題然後堆廣首頁。 這樣做的好處是,因為首頁一般來說擁有最高的權重。如果可以把首頁作為主要頁面並集中推廣,那就有機會搶下這個關鍵字。 主要的關鍵字就是
Thumbnail
最近發現有很多的網站的做法都是先找到某個不錯的關鍵字,然後直接用關鍵字當作網域名稱。 接著把網站首頁作為主要頁面,然後其他頁面圍繞著相同主題然後堆廣首頁。 這樣做的好處是,因為首頁一般來說擁有最高的權重。如果可以把首頁作為主要頁面並集中推廣,那就有機會搶下這個關鍵字。 主要的關鍵字就是
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News