網站圖片優化
- 2019 年 11 月 6 日
- 筆記
- 影像壓縮
- JPEG/JPG
- PNG (PNG-8 與 PNG-24)
- WebP
影像壓縮
1.使用 imagemin cd進入項目根目錄
npm install imagemin
2.創建一個名為 imagemin.js 的新文件，寫入以下內容：
const imagemin = require('imagemin'); const PNGImages = 'static/images/*.png'; const JPEGImages = 'static/images/*.jpg'; const output = 'build/images';
3.運行 node imagemin.js
JPEG/JPG
優點
- 有損壓縮。高品質的壓縮方式：當我們把圖片體積壓縮至原有體積的 50% 以下時，JPG 仍然可以保持住 60% 的品質
- 以 24 位存儲單個圖，可以呈現多達 1600 萬種顏色，足以應對大多數場景下對色彩的要求,壓縮前後的品質損耗不易察覺
使用場景
適用於呈現色彩豐富的圖片
- 大的背景圖
- 輪播圖
- Banner圖
缺陷
- 處理矢量圖形和 Logo 等線條感較強、顏色對比強烈的影像時，人為壓縮導致的圖片模糊會相當明顯
- 不支援透明度處理，透明圖片需要召喚 PNG 來呈現
用 MozJPEG 壓縮 jpeg 1.npm install imagemin-mozjpeg 2.以下內容添加到 imagemin.js 中
const imageminMozjpeg = require('imagemin-mozjpeg'); const optimiseJPEGImages = () => imagemin([JPEGImages], output, { plugins: [ imageminMozjpeg({ quality: 70, }), ] }); optimiseJPEGImages() .catch(error => console.log(error));
3.運行 node imagemin.js, 從build/images 文件夾中獲取優化後的版本
PNG (PNG-8 與 PNG-24)
優點
- 無損壓縮高保真
- 8 位的 PNG 最多支援 256 種顏色，24 位的可以呈現約 1600 萬種顏色
- 比 JPG 更強的色彩表現力，對線條的處理更加細膩，對透明度有良好的支援
缺點
- 體積太大
應用場景
- 呈現小的 Logo、顏色簡單且對比強烈的圖片或背景等
使用 pngquant 優化 PNG 影像 1.npm install imagemin-pngquant 2.以下內容添加到 imagemin.js 中
const imageminPngquant = require('imagemin-pngquant'); const optimisePNGImages = () => imagemin([PNGImages], output, { plugins: [ imageminPngquant({ quality: '65-80' }) ], }); optimiseJPEGImages() .then(() => optimisePNGImages()) .catch(error => console.log(error));
將 quality 設置為 65-80 可以在文件大小和影像品質之間較好的折衷方案
WebP
優點
像 JPEG 一樣對細節豐富的圖片信手拈來，像 PNG 一樣支援透明，像 GIF 一樣可以顯示動態圖片——它集多種圖片文件格式的優點於一身
官方介紹
與 PNG 相比，WebP 無損影像的尺寸縮小了 26％。在等效的 SSIM 品質指數下，WebP 有損影像比同類 JPEG 影像小25-34％。 無損 WebP 支援透明度（也稱為 alpha 通道），僅需 22％ 的額外位元組。對於有損 RGB 壓縮可接受的情況，有損 WebP 也支援透明度，與 PNG 相比，通常提供 3 倍的文件大小。
- 通過以無損和有損格式編碼影像來提供更小的文件大小，使其成為 JPEG 和 PNG 的一個很好的替代方案
- 清晰度通常可以與 JPEG 和 PNG相提並論，而且文件大小要小得多
- 瀏覽器對 WebP 支援並不普遍
優化webp影像 1.npm install imagemin-webp 2.以下內容添加到 imagemin.js 中
const imageminWebp = require('imagemin-webp'); const convertPNGToWebp = () => imagemin([PNGImages], output, { use: [ imageminWebp({ quality: 85, }), ] }); const convertJPGToWebp = () => imagemin([JPGImages], output, { use: [ imageminWebp({ quality: 75, }), ] }); optimiseJPEGImages() .then(() => optimisePNGImages()) .then(() => convertPNGToWebp()) .then(() => convertJPGToWebp()) .catch(error => console.log(error));
quality 設置為 85 會生成品質與 PNG 相當但小得多的 WebP 影像。
