當(dāng)需要對(duì)圖片進(jìn)行內(nèi)存優(yōu)化又不影響圖片的高清度時(shí)，我們需要根據(jù)特定情況借助一些圖片優(yōu)化工具。

推薦的7款圖片內(nèi)存優(yōu)化工具有：

（二）圖片需要優(yōu)化的參考依據(jù)是什么？

一、?谷歌頁面速度洞察

采取google pagespeedinsights在線網(wǎng)址檢測(cè)網(wǎng)站速度得分，里面會(huì)有關(guān)于各項(xiàng)性能的建議，包括需要優(yōu)化的圖片

二、谷歌燈塔

Google Lighthouse如何將圖像標(biāo)記為可優(yōu)化的？

Lighthouse收集頁面上的所有JPEG或BMP圖像，將每個(gè)圖像的壓縮級(jí)別設(shè)置為85，然后將原始版本與壓縮版本進(jìn)行比較。如果潛在節(jié)省量為4KiB或更大，則Lighthouse將圖像標(biāo)記為可優(yōu)化。

谷歌燈塔和google頁面速度洞察測(cè)試的結(jié)果是一樣的，區(qū)別是谷歌燈塔是chorme插件，google頁面速度洞察是在線網(wǎng)址。

（二）如何優(yōu)化圖像？?優(yōu)化圖片內(nèi)存大小的幾種方式：

一、使用映像CDN

內(nèi)容交付網(wǎng)絡(luò)或CDN由全球范圍內(nèi)的一系列服務(wù)器和存在點(diǎn)組成，這有助于縮短頁面加載時(shí)間，并通過使內(nèi)容離用戶更近來減少內(nèi)容的下載時(shí)間。用最簡單的方式，CDN可以解釋為您網(wǎng)站的一組鏡像，其托管方式是將內(nèi)容從距離他們最近的服務(wù)器提供給您的目標(biāo)受眾。

CDN包括圖像CDN, JS CDN, CSS CDN。

映像CDN可以分為兩類：自我管理和第三方管理。

自我管理的映像CDN：對(duì)于擁有易于維護(hù)自己的基礎(chǔ)架構(gòu)的工程人員的站點(diǎn)，自我管理的CDN可能是一個(gè)不錯(cuò)的選擇，Thumbor是當(dāng)今唯一可用的自我管理映像CDN。

第三方管理的影像CDN：第三方映像CDN提供映像CDN作為服務(wù)。就像云提供商免費(fèi)提供服務(wù)器和其他基礎(chǔ)架構(gòu)一樣；

圖像CDN專門從事圖像的轉(zhuǎn)換，優(yōu)化和交付。您也可以將它們視為用于訪問和操作網(wǎng)站上使用的圖像的API。對(duì)于從圖像CDN加載的圖像，圖像URL不僅指示要加載的圖像，還指示尺寸，格式和質(zhì)量等參數(shù)。這樣就很容易為不同的用例創(chuàng)建圖像的變體。切換到映像CDN可以節(jié)省40-80％的映像文件大小。

二、壓縮影像：

使用工具壓縮圖像：

工具1：imagemin （付費(fèi)）

支持多種圖像格式，并且易于與構(gòu)建腳本和構(gòu)建工具集成

工具2：https://squoosh.app/?（免費(fèi)）

推薦使用這幾種圖片格式：browser png, jpeg xl,mozJpeg,

?

壓縮后清晰度和大小對(duì)比：?

三、用視頻替換GIF動(dòng)畫：

用視頻替換GIF動(dòng)畫，以加快頁面加載速度，視頻格式推薦mp4和webm。

可使用FFmpeg創(chuàng)建webm視頻，WebM視頻比MP4視頻小得多，但并非所有瀏覽器都支持WebM，因此生成這兩者是有意義的。

Gif, mp4, webm 視頻格式大小對(duì)比：

動(dòng)畫gif具有自動(dòng)播放功能，視頻通過video元素<video autoplay loop muted playsinline></video> 也可實(shí)現(xiàn)自動(dòng)播放。

另外，該<video>元素需要一個(gè)或多<source>個(gè)子元素，這些子元素指向?yàn)g覽器可以選擇的不同視頻文件，具體取決于瀏覽器的格式支持。同時(shí)提供WebM和MP4，這樣，如果瀏覽器不支持WebM，它就可以退回到MP4。

四、延遲加載圖像：

延遲加載是一種根據(jù)需要而不是預(yù)先加載資源的策略。這種方法在初始頁面加載期間釋放了資源，并避免了加載從未使用過的資產(chǎn)。

使用lazysizes延遲加載圖像。lazysizes是最受歡迎的用于延遲加載圖像的庫。它是一個(gè)腳本，可以在用戶瀏覽頁面時(shí)智能地加載圖像，并確定用戶不久將要遇到的圖像的優(yōu)先級(jí)。

添加lazysizes方法：

• 將lazysizes腳本添加到您的頁面。

• 選擇您要延遲加載的圖像。

• 更新這些圖像的<img>和/或<picture>標(biāo)簽。

五、提供響應(yīng)式圖像

向移動(dòng)設(shè)備提供桌面大小的圖像可能會(huì)比實(shí)際需要多使用2-4倍的數(shù)據(jù)。代替“一刀切”的圖像處理方法，而是為不同的設(shè)備提供不同的圖像大小。

兩種最流行的圖像大小調(diào)整工具是Sharp NPM軟件包和ImageMagick CLI工具。

Sharp的軟件包是自動(dòng)調(diào)整圖像大小的一個(gè)不錯(cuò)的選擇（例如，為您網(wǎng)站上的所有視頻生成多種尺寸的縮略圖）。它可以快速，輕松地與構(gòu)建腳本和工具集成。

另一方面，ImageMagick便于一次性調(diào)整圖像大小，因?yàn)樗耆珡拿钚惺褂谩?/span>

這兩個(gè)都涉及到開源代碼，偏技術(shù)，就不多做討論了。Thumbor（開源）和Cloudinary等圖像服務(wù)也值得一試。

?

六、提供尺寸正確的圖片

Lighthouse可以輕松識(shí)別大小不正確的圖像。運(yùn)行性能審核（Lighthouse> Options> Performance），然后查找適當(dāng)大小的圖像審核的結(jié)果。審核會(huì)列出需要調(diào)整大小的所有圖像。

沒有按比例縮小圖像，卻將其添加到頁面中。該圖像看起來不錯(cuò)，但是卻浪費(fèi)了用戶的數(shù)據(jù)并損害了頁面性能。

有兩種類型的CSS單位用于指定HTML元素（包括圖像）的大?。?/span>

絕對(duì)單位：無論使用哪種設(shè)備，使用絕對(duì)單位設(shè)置樣式的元素將始終以相同的大小顯示。有效的絕對(duì)CSS單位示例：px，cm，mm，in。

相對(duì)單位：使用相對(duì)單位設(shè)置樣式的元素將以不同的大小顯示，具體取決于指定的相對(duì)長度。有效的相對(duì)CSS單位示例：％，vw（1vw =視口寬度的1％），em（1.5 em = 1.5倍字體大?。?/span>

圖像大小調(diào)整兩種方法：“好的”和“更好的”。

兩者都將提高性能，但是“更好”的方法可能需要更長的時(shí)間來理解和實(shí)施。但是，它也會(huì)網(wǎng)站帶來更大的性能改進(jìn)。

• 好的方法：

相對(duì)單位：將圖像調(diào)整為適合所有設(shè)備的尺寸。

絕對(duì)單位：調(diào)整圖像大小以匹配其顯示尺寸。

• 更好的方法：

相對(duì)單位：使用響應(yīng)圖像提供不同的圖像以顯示尺寸。

對(duì)于較小的設(shè)備而言，在所有設(shè)備上均可使用的圖像將不必要地過大。響應(yīng)圖像技術(shù)，特別是srcset 和尺寸，允許你指定多個(gè)圖像版本和設(shè)備，選擇適合它的工作原理最好的大小。

絕對(duì)單位：使用srcset和大小屬性來提供不同的圖像以不同的顯示密度。

“顯示密度”是指不同的顯示器具有不同的像素密度的事實(shí)。在所有其他條件相同的情況下，高像素密度的顯示器將比低像素密度的顯示器銳利。

如果要調(diào)整許多圖像的大小，使用腳本或服務(wù)來自動(dòng)執(zhí)行該過程更為方便。

七、使用WebP圖像

WebP圖像比JPEG和PNG圖像小（通常將文件大小減少25-35％）。這樣可以減小頁面大小并提高性能。

• YouTube發(fā)現(xiàn)，切換到WebP縮略圖可使頁面加載速度提高10％。

• 當(dāng)Facebook切換到使用webp格式時(shí)，比jpeg文件節(jié)省了25-35%，比png格式文件節(jié)省了80%。

WebP是JPEG，PNG和GIF圖像的理想替代品。此外，WebP提供無損壓縮和有損壓縮。在無損壓縮中，不會(huì)丟失任何數(shù)據(jù)。有損壓縮會(huì)減小文件大小，但會(huì)以降低圖像質(zhì)量為代價(jià)。

如下圖所示，webp格式的圖片，size大都是20KB以內(nèi)。?

將圖像轉(zhuǎn)換為WebP的方法：

人們通常使用以下方法之一將其圖像轉(zhuǎn)換為WebP：cwebp命令行工具或Imagemin WebP插件（npm軟件包）。如果項(xiàng)目使用構(gòu)建腳本或構(gòu)建工具（例如Webpack或Gulp），則Imagemin WebP插件通常是最佳選擇，而對(duì)于簡單項(xiàng)目或僅需轉(zhuǎn)換圖像一次，CLI是一個(gè)不錯(cuò)的選擇。

將圖像轉(zhuǎn)換為WebP時(shí)，可以選擇設(shè)置各種壓縮設(shè)置-但是對(duì)于大多數(shù)人來說，唯一需要關(guān)心的就是質(zhì)量設(shè)置。可以在0（最差）到100（最好）之間指定質(zhì)量等級(jí)。在圖像質(zhì)量和文件大小之間選擇正確折中方式。

?

擴(kuò)充：

Joomla：JCH Optimize，jQuery Easy插件可在保持質(zhì)量的同時(shí)壓縮圖像。

Magento：優(yōu)化圖像的第三方Magento擴(kuò)展。

WordPress圖片優(yōu)化插件：

Smush – Lazy Load Images, Optimize & Compress Images

WP-Optimize – Clean, Compress, Cache.

EWWW Image Optimizer

Imagify – Optimize your Images & Convert WebP

圖像優(yōu)化WordPress插件，該插件可在保持質(zhì)量的同時(shí)壓縮圖像。