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

阿榮
發佈於前端
閱讀時間約 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 這個問題,目前還在嘗試中...

資料來源


主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
圖片陰謀論 人們一開始就是買了一堆,在眼睛所可以看得到的圖片量並自行取購買,在我們的視線眼光中採取了更多不可能而產出的視線變化觀點,經過人眼睛獲取及取得傳達到主控室並發揮更有效的圖片陰謀論,在我無法獲取圖片量及資訊就無法判定更好的價格。
avatar
吳艾謙
2023-01-30
NFT圖片生成(3)-創立IPFS空間確認這兩個資料夾都上傳成功 複製 META_JSONS 的 CID Step1: 創立ipfs空間的帳號 這邊提供一個網站【Pinata】:只要創立帳號就可以有1gb的空間可以用 Pinata | Effortless IPFS File Management Step2: 上傳圖片到ipfs空間
Thumbnail
avatar
Gouzi5 | ASC
2022-11-03
NFT圖片生成(2)-認識拼圖程式Step1: 零件layers 打開vs code拼圖程式裡面的layers資料夾,其實可以看出成品就是由這些零件所組合而成 所以可以把這些圖片進行替換,製作自己的NFT 拼圖順序順序如下(從下到上): Background->Crypto->Pet->Iris->Shine->Text- Step
Thumbnail
avatar
Gouzi5 | ASC
2022-11-03
NFT圖片生成(1)-導入拼圖程式Step1: 下載拼圖程式 下面是拼圖網址: BlackChain_ASC/ASC_Picture.zip at main · chase5ws/BlackChain_ASC (github.com) Step2: 在vs code裡面打開程式 Step3: 執行拼圖程式 選取右上角的終端機,新增終
Thumbnail
avatar
Gouzi5 | ASC
2022-11-03
圖片去背摳圖:除你之外,我其他都不想要😤(職訓)編輯一張圖片或者是照片的技能已是職場中基本中的基本,遺憾的是,我在進入職訓局受訓前,並不具備如此基本的技能。對於美編軟體一無所知的我,看著參訓每個學員都認真做著筆記,被氣氛渲染的我,決定也要開始做課程紀錄,除了課程學習分享以外,亦想藉由文字輸出的方式來增強記憶,並增進自己的電腦能力。
Thumbnail
avatar
水邊的小槐花Lynn
2022-10-29
avatar
謝東穎
2021-07-23
【『圖片轉換』線上免費HEIC圖片轉換】蘋果發佈iOS 11後,為了增加手機的容量使用效率, 特別將拍照格式改為壓縮率較高、佔用更小存儲空間的 HEIC。 唯一的問題是,許多用戶無法在電腦上直接查看此種格式圖片.. 而寶哥最近也遇到這個問題,剛好發現有這個線上轉檔! 覺得蠻方便的 寶哥操作一次給大家看,很簡單~ (1)點選網址進入網站(h
Thumbnail
avatar
寶哥
2021-01-14
avatar
神奇傑克基金百寶箱
2020-10-01
圖片按鈕化有了這個插件,任何人都可以在不了解 JavaScript 的情況下,輕鬆製作點擊和觸碰遊戲。
Thumbnail
avatar
ReIris
2020-05-14
圖片檔案救援軟體 Bitwar數據恢復軟件是一個快速,可靠和最好的圖片檔案救援軟體功能強大,可以幫助你在幾個步驟救援圖片檔案。它不僅可以用於救援電腦硬碟中的圖像,還可用於任何智能手機,數碼相機,USB驅動器和存儲卡。 深度瞭解:https://tw.bitwar.net/course/delete/770.html
Thumbnail
avatar
無名星人13074
2019-08-05