如果要推薦一款網站加速圖片優化插件，出現在我的推薦名單中應該有 Smush 的身影。別誤會，這款插件沒用給我廣告費用，這篇文章也不是吹捧Smush插件的馬屁文章。在之前的建站教程中，Jack老師一直偏好的是用tinypng來對圖片進行優化壓縮，但tinypng最大的問題在於它是在線壓縮軟體，沒有配套的wordpress插件版本。為了便於一站式集成化操作，所以我在親測了多款圖像壓縮優化插件，最終Smush獲得了我的好感，以至於我今天專門寫一篇文章來講解它的各項好處。廢話不多說，我們來看具體的實操情況。
一.Smush插件的安裝與激活如上圖所示，在我們自己的網站後臺的插件菜單中點擊安裝插件，在搜索框中輸入「Smush」，選中這個「醜女人」然後進行安裝，安裝完成後激啟用該插件即可。
二.Smush插件的相關設置我們看到Smush插件主要有7大板塊功能，分別為bulk smush，directory smush，integrations，lazy load，CDN，tools, settings,我們分別對每一個板塊都進行詳細的講解，首先是Bulk Smush（批量藍精靈，這裡不要把bulk簡單粗暴的理解為散裝啊！）
1.Bulk Smush首先Bulk Smush部分對我們網站的圖像信息進行了整體性批量掃描，分析出我們網站上目前有265個需要優化的圖像內容，它建議我們用它的升級版本進行一次性批量圖像優化處理（免費試用，如果是做圖像站點的同學建議開啟該功能，數量不多的還是算了），當然我們也可以使用免費版本的，只不過功能上有限制，一次性只能優化50張圖像。
區塊一：Image Size（圖像大小）：WordPress為你上傳的每個圖像生成多個圖像縮略圖。
選擇批量優化時要包括的縮略圖大小。默認情況下是選擇全部圖像，點擊「Custom」按鈕後，Smush插件會給出6個壓縮格式，分別是80*80px，300*300px，1030*1030px，1536*1536px，2048*2048px，medium_large；我們根據自己的需要進行選擇。
區塊二：Automatic compression（自動壓縮）：當我們將圖像上傳到自己站點的時候，Smush可以自動為我們優化和壓縮圖像（注意：Smush只會自動壓縮區塊一中我們自行選擇的圖像尺寸，如果我們選擇的是「All」，那麼默認全格式壓縮）
區塊三：Metadata（元數據）：不知道大家有沒有注意到過一個有趣的現象，在膠片相機時代，經常能夠在照片上看到拍攝日期，而進入數位相機時代後，這些照片的信息反而不見了（事實上他們只是隱藏在了數字格式中沒有在前端顯示，當我們上傳圖像數據的時候這些元數據會上傳到網站上），這些元數據對我們並沒有太大的用處建議進行刪除。
區塊四：（ps的時候我忘記把這塊區域內容做到上圖上了，請各位觀眾老爺見諒）Image Resizing（圖像調整大小）：這個功能是wordpress升級到5.3版本之後Smush插件新增的，因為從WordPress 5.3開始，將大圖像上傳大小調整為指定的最大寬度和高度。如果在頁面上檢測到了不必要的大尺寸圖像，Smush插件會以減小其尺寸從而減少加載時間。注意：gif格式的動畫不會調整大小，否則會導致動畫無法正常加載
2.Director Smush這部分內容講的是目錄優化，除了優化我們上傳的圖像資源外，我們網站上還存在很多圖像不是我們自己上傳但已經存在的，比方說原有的主題Demo中的圖像或者背景等，為了方便我們優化這些內容，Smush插件採用目錄優化的方式，點擊上圖中藍色的「Choose Directory」插件，會出現一個列表框，裡面是我們的網站根目錄文件夾列表（不好意思，我忘記截圖進行說明了，同學們根據我的操作過程應該能在自己網站上看到這些根目錄中的文件夾），然後我們有針對性的選擇一些需要優化的文件夾即可。
3.Integrations區塊一:Gutenberg Support(古騰堡支持):古騰堡是wordpress官方現在主推圖的編輯器(不過受歡迎程度並不是很高)，它的功能是為顯示圖像的古騰堡塊添加統計信息和手動拖尾按鈕。因為我的網站沒有使用古騰堡編輯插件所以這個對我來說並沒有太大作用。
區塊二：WPBakery Page Builder：允許在WPBakery Page Builder編輯器插件中調整大小的圖像，這個功能也需要安裝WPBakery Page Builder這個插件的，我的心頭好是Elementor編輯器，所以我再次選擇性的忽略了
區塊三：Amazon S3和NextGen Gallery這兩個功能區塊是需要Smush Pro版本才能使用的，我沒有開通pro版本，此處略過不講解
4.Lazy Load區塊一：Media Types：選擇要延遲加載的媒體類型，對應的選項媒體文件類型有.jpeg .png .gif .svg iframe，我們根據自己的前端頁面展示效果和網站加載速度提升的兩方面綜合考慮來進行選擇，某些情況下這些媒體文件並不是很適合lazy load（也就是我們傳說的懶惰加載）
Output Locations（輸出位置）：默認情況下，Smush將延遲加載所有圖像，但是我們也可以將其優化為特定的媒體輸出，比方說內容，小部件，文章縮略圖等等
區塊二：Display & Animation（顯示和位置）：選擇要如何顯示預加載的圖像，以及如何將其設置為動畫
Display（顯示）：在這裡Smush插件給了4種圖像預加載的方式：淡入，微調，佔位符，沒有顯示；這四種顯示方式分別有4種不同的動畫顯示方式以供我們進行選擇設置和跳轉
區塊三Include/Exclude（包含/排除）：對希望防止延遲加載的特定頁面，帖子或圖像類禁用延遲加載，因為某些原因，網站上的一些特定頁面我們並不想用lazy load的方式來顯示加載媒體文件和圖像，所以我們可以針對這些頁面進行選擇性排除，這樣Smush插件就知道了哪些頁面上的圖像和媒體文件是不需要lazy load，在上圖中的左側部分，我們根據自己的需要進行選擇性排除即可。如果你覺得這樣的選擇範圍太廣無法達到你需要的目標，那麼右邊的url方式就很實用了，比方說有一篇文章我不想用lazy load方式來顯示，那麼就可以在右上角的方框中輸入其對應的url：www.example.com/abc.com.html
如果上面的url方式還是打擊面太廣，你還想要進一步定義不需要加載的圖像和媒體文件，那麼上圖右邊的Classes ＆IDs選項就更實用了，不過這個設置需要一定的代碼基礎，特別是CSS語言也就是疊層樣式表中的類選擇器部分的相關知識
當然了lazy lado不是一定非要進行安裝設置，如果你的網站框架和語言代碼足夠精簡，完全可以不用lazy load設置，點擊該項目的底部的Deactivate按鈕即可禁止該功能
5.CDN這部分不做重點講解，因為它需要配套的WPMU DEV會員身份。大體的工作原理就是用批量Smush自動壓縮和調整圖像大小，或通過多遍有損壓縮和自動調整大小功能將它們上傳到WPMU DEV的超快CDN，通過減輕伺服器負擔來提高頁面速度。（不是很建議這種操作！）
6.Tools區塊一Image Resize Detection（圖像調整大小檢測）：它可以為我們的網站添加功能，以突出顯示對於容器而言太大或太小的圖像， 檢測並顯示大小不正確的圖像，比方說我們默認網站前端頁面容器寬度為1440px，這時候我們的原始圖片是1920*600px的，顯然這個原始圖片是將超出1440px的容器寬度，這時候smush插件就會對其進行突出顯示，以方便我們對其進行進一步的優化
區塊二Bulk Restore（批量還原）：某些情況下我們不想讓圖像進行壓縮，反而想讓圖片恢復成原始狀態，有些同學可能會擔心，之前已經壓縮過一次不管是有損還是無損優化，對圖像畫質多多少少應該會有一些影響。事實上Smush插件的強大之處就在於它的圖像還原技術是很牛逼的，即便是壓縮過的圖像也能恢復到原始狀態，這是市面上很多圖像優化插件所做不到的事情
7.Setting區塊一Translations（翻譯）：默認情況下，如果有匹配的翻譯可用，Smush將使用您在WordPress管理員設置中設置的語言，如果我們在wordpress後臺設置的默認語言是中文，那麼smush插件的編輯語言就是中文
Color Accessibility：啟用高對比度模式
區塊二Data（數據）：數據部分包含三個子項目，分別是還原圖像，卸載，恢復出廠設置；這個版塊內容沒什麼好說的，根據自己的需要進行設置就好
區塊三API Status：這個版塊功能是針對Smush Pro版本的付費功能來說的，如果你在啟用專業版本的相關功能時遇到問題，可以強制API在此處更新你的會員資格，從而恢復對專業版本功能的使用權限！
好了，以上就是本章關於網站加速圖片優化插件Smush的全部實操內容，如果有不理解的地方，沒關係，解決方案如下：
百度或者谷歌瀏覽器搜索 「JACK外貿建站」，排名首頁首位的就是我的網站。網站上有更多免費的外貿建站、谷歌SEO優化、外貿客戶開發等實操乾貨知識等著你哦！
（各位看官老爺，都看到這裡了，就麻煩動動金手點擊轉發一下本文到自己的微信朋友圈吧，轉發過程如下）
QQ:3233269705
QQ群：645296397
微信公眾號：