WordPress網(wǎng)站如何優(yōu)化圖片

你是否知道圖片對網(wǎng)站的速度有巨大的影響？作為新手建站經(jīng)常忽略這一點(diǎn)，由于上傳了未經(jīng)優(yōu)化的原圖，導(dǎo)致網(wǎng)站打開速度很慢，還以為是服務(wù)器不好，這是常有的事。本文就將講解wordpress網(wǎng)站如何優(yōu)化圖片，包含了圖片的格式、文件大小、尺寸建議，還包含了photoshop自動(dòng)批處理、wordpress圖片優(yōu)化插件使用教程。

什么是圖片優(yōu)化？

圖像優(yōu)化是盡可能少的降低圖片質(zhì)量，同時(shí)盡可能大的縮小圖片文件大小。見下圖，優(yōu)化前后的圖片幾乎看不出質(zhì)量上的區(qū)別，但圖片縮小了75%。

優(yōu)化圖片的好處？

1. 更快的網(wǎng)站速度
2. 提升SEO排名
3. 銷售和潛在客戶的整體轉(zhuǎn)化率更高
4. 更少的存儲(chǔ)空間和帶寬（可以減少托管和CDN成本）
5. 更快的網(wǎng)站備份（也降低了備份存儲(chǔ)成本）

如何優(yōu)化圖片？

優(yōu)化圖片的關(guān)鍵三要素：

圖像文件格式：JPG，PNG和GIF

圖像尺寸：高度和寬度

壓縮率：較高的壓縮率=較小的文件

通過組合不同的格式、尺寸、壓縮比，甚至可以將圖像減重80％。

圖片格式

JPG：照片或具有豐富顏色的圖像請使用JPG，JPG是一種壓縮的文件格式，它會(huì)稍微降低圖像質(zhì)量，以便文件更小。

PNG：適合簡單圖像或透明圖像，PNG圖像格式未壓縮，這意味著它是更高質(zhì)量的圖像，但缺點(diǎn)是文件更大。

GIF：僅適用于動(dòng)畫圖像，GIF使用256色以及無損壓縮，這使其成為動(dòng)畫圖像的最佳選擇

圖片尺寸與文件大小

針對外貿(mào)建站的常見用圖場景：

Logo：寬度不超過300px，大小建議在50K以內(nèi)

站點(diǎn)圖標(biāo)：大小控制在幾K

如果只考慮圖標(biāo)顯示在瀏覽器頁卡中的情況，不考慮手機(jī)端收藏網(wǎng)頁后的圖標(biāo)效果，尺寸僅需16*16。

如果考慮手機(jī)端和瀏覽器頁卡的兩種情形，尺寸512px × 512px，在wordpress后臺(tái)上傳圖標(biāo)時(shí)便建議上傳512尺寸的。

Banner/slider：廣告圖或裝飾用的背景圖片，寬度一般建議在1200px，若banner希望做成全寬的，那么圖片用2560px寬度也是可以的，但要盡量不讓圖片太大，最大也盡量不要超過200K，以不影響清晰度為前提，越小越好。

產(chǎn)品圖片：寬度建議在600-1200px，大小建議控制在150K以下，有條件的話，盡量保證圖片的方向和尺寸的統(tǒng)一性，避免部分圖片是橫圖，部分又是豎圖。

其他圖片，如證書、團(tuán)隊(duì)成員等：寬度建議在1200px以內(nèi)，大小建議控制在150K以下。

如何知道自己的圖片是否需要優(yōu)化？

對照上文的建議，查看自己上傳的圖片格式、文件大小、尺寸

用工具gtmetrix檢測，如下圖所示，提示Optimize images分?jǐn)?shù)很低（綠色表示優(yōu)秀，紅色表示很差），也能看到有很多需要優(yōu)化的圖片，這是我必用的方法

譬如本站的外貿(mào)建站教程頁面，圖片多達(dá)200多張，在圖片經(jīng)過shortpixel優(yōu)化后，Optimize images評(píng)分達(dá)到99分。

圖片壓縮

圖像壓縮有不同的工具和壓縮效果，你可以使用免費(fèi)工具壓縮圖片，然后再上傳到網(wǎng)站中，譬如photoshop，或者是在線壓縮工具：http://shortpixel.com/、https://tinypng.com/，對于原圖很大的圖片，線上壓縮工具有最大文件限制，所以過大的圖片，譬如5M以上，建議先用photoshop或者paint.net進(jìn)行本地壓縮。

也可以采取簡單省時(shí)省事的方法，譬如使用下面的wordpress插件在上傳圖片時(shí)自動(dòng)壓縮

ShortPixel Image Optimizer ——我用的這個(gè)，有每月免費(fèi)壓縮額度，買了一次性付費(fèi)9.9美元，可壓縮10000張圖片

Imagify ——網(wǎng)站加速插件WP Rocket開發(fā)的，有每月免費(fèi)壓縮額度，一次性付費(fèi)9.9美元，可壓縮1G圖片（約1000張）

reSmush.it image optimizer——免費(fèi)的，但壓縮效果不如上面兩款付費(fèi)的

下面，我們逐一介紹壓縮圖片的操作方法。

本地壓縮圖片

圖片數(shù)量多時(shí)，用photoshop的自動(dòng)批處理功能

打開photshop，打開一張圖片

在菜單欄中，點(diǎn)擊“窗口”，勾選“動(dòng)作”，點(diǎn)擊新建按鈕，命名動(dòng)作名稱，確定后自動(dòng)開始錄制

將圖像大小改為目標(biāo)尺寸，如1000px或1200px

將圖片存儲(chǔ)為web格式，調(diào)整質(zhì)量為90 jpg格式，存儲(chǔ)到非原圖的新文件夾內(nèi)。（PS：如果你的圖片需要保留透明效果，就要保持為png格式，通常png格式比jpg格式的圖片要大）

關(guān)閉圖片，并點(diǎn)擊不保存原圖修改，

至此，動(dòng)作錄制完成，點(diǎn)擊動(dòng)作錄制的結(jié)束按鈕

接下來進(jìn)行圖片的批量處理，

點(diǎn)擊文件》自動(dòng)》批處理

選擇動(dòng)作，默認(rèn)已經(jīng)選好剛才錄制的動(dòng)作

選擇源文件夾：選擇需要處理的圖片所存放的文件夾

目標(biāo)文件夾：選擇需要存儲(chǔ)處理后圖片的文件夾

點(diǎn)擊確定，photoshop開始快速處理圖片，處理完成后你去文件夾里驗(yàn)收即可

圖片數(shù)量少時(shí)，用免費(fèi)軟件paint.net單個(gè)處理，采用下面的步驟會(huì)覆蓋原圖，如需保留原圖，則請先復(fù)制一份原圖

用paint.net打開圖片

點(diǎn)擊ctrl+r修改圖像尺寸后，回車鍵確認(rèn)

點(diǎn)擊ctrl+s保存圖片，設(shè)置質(zhì)量為90，回車鍵確認(rèn)

手動(dòng)線上壓縮圖片

以shortpixel在線壓縮圖片為例，下面講解壓縮圖片的操作步驟

打開https://shortpixel.com/online-image-compression，一般選擇glossy壓縮，lossy是最大壓縮，圖可能會(huì)糊掉；Lossless是最小壓縮，圖片質(zhì)量損失越少。

將圖片拖拽到虛線框內(nèi)進(jìn)行壓縮

壓縮成功后逐一下載圖片，你也可以點(diǎn)擊預(yù)覽按鈕查看壓縮前后的效果對比

Wordpress插件自動(dòng)壓縮圖片

以免費(fèi)的reSmush.it image optimizer插件為例，下面講解如何在線自動(dòng)壓縮圖片

1.確保安裝并啟用了插件reSmush.it image optimizer，按下圖所示配置后，此后每次上傳圖片都會(huì)自動(dòng)壓縮圖片

2.若需要優(yōu)化安裝插件之前的圖片，請?jiān)谏蠄D中點(diǎn)擊optimize all pictures，或者在下圖所示的媒體庫中，點(diǎn)選optimize按鈕手動(dòng)優(yōu)化。

禁止自動(dòng)生成圖片

對于付費(fèi)壓縮圖片的插件，需要注意的是：由于每張圖片在上傳時(shí)會(huì)被系統(tǒng)自動(dòng)生成多張不同尺寸的圖片，譬如wordpress和woocommerce都會(huì)這么做，那么如果壓縮這些自動(dòng)生成的圖片就會(huì)加快付費(fèi)額度的消耗，請?jiān)谟酶顿M(fèi)插件時(shí)，進(jìn)入插件的設(shè)置頁面，設(shè)置：將縮略圖不進(jìn)行壓縮，或有選擇的進(jìn)行壓縮，而我還會(huì)用短代碼直接阻止系統(tǒng)生成無用的圖片，不僅能節(jié)省空間，也能避免消耗壓縮額度，下面介紹如何用短代碼阻止系統(tǒng)生成的圖片。

需要知道的是，這些自動(dòng)生成的圖片并不能在wordpress的媒體庫看到，需要在服務(wù)器中查看，下圖是wordpress的媒體庫，只能看到原圖

下圖是siteground后臺(tái)查看圖片文件的方法，請?jiān)谶M(jìn)入網(wǎng)站的sitetools后按下圖所示順序操作查看，我們能看到系統(tǒng)為同一張圖生成了很多不同尺寸的圖片

在網(wǎng)站頁面設(shè)計(jì)完、內(nèi)容上傳前，我們先禁用所有自動(dòng)生成的圖片；若馬上可以上傳內(nèi)容了，我們可以根據(jù)設(shè)計(jì)情況，酌情放開部分圖片尺寸，譬如在制作產(chǎn)品列表頁時(shí)，我們用到了300*300px的圖片，那么就在下面的代碼中，將對應(yīng)行的代碼前加//注釋掉或直接刪除該行。

安裝安裝插件Code snippets

進(jìn)入 Snippets > add new頁面

輸入標(biāo)題，例如：禁用所有縮略圖

輸入如下代碼

// disable generated image sizes function shapeSpace_disable_image_sizes($sizes) { unset($sizes['thumbnail']); // disable thumbnail size unset($sizes['medium']); // disable medium size unset($sizes['large']); // disable large size unset($sizes['medium_large']); // disable medium-large size unset($sizes['1536x1536']); // disable 2x medium-large size unset($sizes['2048x2048']); // disable 2x large size unset($sizes['shop_catalog']); unset($sizes['shop_single']); unset($sizes['shop_thumbnail']); unset($sizes['woocommerce_thumbnail']); unset($sizes['woocommerce_single']); unset($sizes['woocommerce_gallery_thumbnail']); return $sizes; } add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_image_sizes'); // disable scaled image size add_filter('big_image_size_threshold', '__return_false'); // disable other image sizes function shapeSpace_disable_other_image_sizes() { remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size() remove_image_size('another-size'); // disable any other added image sizes } add_action('init', 'shapeSpace_disable_other_image_sizes');

選擇 Run snippet everywhere

點(diǎn)擊Save changes保存即可。

（來源：B2B獨(dú)立站教程Bonnie）

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。

（來源：B2B獨(dú)立站教程Bonnie）