掌握WordPress中的圖像優化-＆＃＆按-PHP中文網

優化圖像壓縮：同時使用有損和無損壓縮技術可大大減少圖像文件大小，平衡質量和性能，並使用諸如用於自動壓縮的TinyPNG之類的工具。
>調整JPEG質量設置：通過主題的`functions.php`修改默認的JPEG映像質量，以直接在WordPress中管理文件大小，優化存儲時間和加載時間。
>
>主題圖像大小
> WordPress用戶上傳圖像時，WordPress提供了兩個功能，我們可以在特定的維度下使用它們來創建原始圖像的副本。這很有用，我們要在主題內以特定大小的特定大小輸出圖像。

縮略圖，中大小

在WordPress管理中，在設置>媒體下，有三個預定義的圖像尺寸：縮略圖，中和大。每個人都可以設置自己的尺寸。

>由於WordPress始終將圖像大小調整到這些尺寸（導致4個圖像被存儲- 原始的，縮略圖，中等大小和大尺寸），因此值得首先設置這些圖像，並在可能的情況下將它們放在WordPress主題中。

>在WordPress主題中使用預定義的圖像大小，使用：>

<span>while ( have_posts() ) {
</span>    <span>the_post();
</span>    <span>the_post_thumbnail( 'thumbnail' ); // Or 'medium', or 'large'
</span><span>}</span>

登入後複製

set_post_thumbnail_size（）

如果您需要其他圖像尺寸，我們可以使用set_post_thumbnail_size（）：>

設置默認特徵圖像（以前為縮略圖後）尺寸。

>這允許我們定義帖子，頁面和自定義帖子類型的特徵圖像的寬度和高度，我們使用the_post_thumbnail（）。

要定義特色圖像大小，請將以下代碼添加到主題的functions.php文件中。這將將特色圖像設置為500px寬度x 500px高度：

>要在指定的維度上輸出帖子的特徵圖像，請在WordPress循環中使用the_post_thumbnail（）：

<span>add_theme_support( 'post-thumbnails' );
</span><span>set_post_thumbnail_size( 500, 500, true );</span>

登入後複製

add_image_size（）

>雖然set_post_thumbnail_size（）很有用，但我們只能稱其為定義一組圖像尺寸，以及WordPress縮略圖，中型和大尺寸。如果我們想輸出其他尺寸，我們就會卡住，例如，我們的帖子為500px x 500px圖像，以及我們頁面的400px x 400px圖像。

<span>while ( have_posts() ) {
</span>    <span>the_post();
</span>    <span>the_post_thumbnail();
</span><span>}</span>

登入後複製

幸運的是，WordPress還提供add_image_size（）函數：

記錄一個新的圖像大小。這意味著WordPress將在上傳新圖像時使用指定的維度創建圖像的副本。

。

>我們可以在主題的functions.php文件中調用此函數，以根據主題要求註冊盡可能多的圖像大小。讓我們註冊兩個圖像尺寸，分別用於帖子和頁面：

我們現在可以通過修改我們的the_post_thumbnail（）調用：>

結果

<span>add_image_size( 'post', 500, 500, true );
</span><span>add_image_size( 'page', 400, 400, true );</span>

登入後複製

使用我們的測試JPEG和PNG圖像，我們可以看到文件尺寸降低和性能增長：

jpeg圖像

<span>while ( have_posts() ) {
</span>    <span>the_post();
</span>    <span>the_post_thumbnail( 'post' ); // Or 'page'
</span><span>}</span>

登入後複製

原始尺寸 - 文件大小：504KB

500px x 500px - 文件大小：29kb

400px x 400px - 文件大小：21kb

> png圖像

原始尺寸 - 文件大小：697KB

500px x 500px - 文件大小：354KB 掌握WordPress中的圖像優化

400px x 400px - 文件大小：236KB 掌握WordPress中的圖像優化

圖像壓縮

>圖像壓縮旨在通過刪除冗餘數據進一步減少圖像文件大小，而對圖像質量的犧牲很少或沒有犧牲。掌握WordPress中的圖像優化

圖像壓縮有兩種主要方法：有損和無損。

>有損圖像壓縮

有損壓縮使用不精確的近似值，丟棄了部分圖像數據，以產生具有較低文件大小的映像，同時盡可能地維護原始圖像。

>元數據（例如Exif信息，告訴我們有關相機製造，模型和位置）可以丟棄，不會影響圖像質量。

缺點是圖像質量可能會受到影響，因此在快速圖像加載時間和圖像質量之間找到適當的平衡很重要。

有損壓縮通常在JPEG圖像和照片上使用，其中圖像文件中有很多數據以渲染圖像輸出。

使用我們的測試圖像和tinypng.com，我們可以看到有損壓縮對我們的JPEG和PNG圖像的影響：

jpeg圖像

原始尺寸 - 原始文件大小：504KB，有損耗的壓縮文件大小：367KB，保存：27％

500px x 500px - 原始文件大小：29kb，有損耗的壓縮文件大小：17.1kb，保存：41％掌握WordPress中的圖像優化

400px x 400px - 原始文件大小：21kb，有損耗的壓縮文件大小：12.5kb，保存：39％掌握WordPress中的圖像優化

> png圖像

原始尺寸 - 原始文件大小：697KB，有損耗的壓縮文件大小：229.6KB，保存：67％

500px x 500px - 原始文件大小：354KB，有損耗的壓縮文件大小：94.3kb，保存：73％掌握WordPress中的圖像優化

400px x 400px - 原始文件大小：236kb，有損耗的壓縮文件大小：64.6kb，保存：73％掌握WordPress中的圖像優化

無損圖像壓縮

無損壓縮允許部分丟棄和壓縮圖像數據，而不會丟失圖像質量。 “無損”壓縮的圖像將與原始圖像相同。

缺點是，它通常不會在更複雜的圖像（例如照片）上提供任何文件大小的改進。因此，它最好用於png和gif圖像。

圖像壓縮：WordPress解決方案

WordPress使用有損壓縮提供了兩種調整圖像質量的方法。我們可以通過將以下代碼添加到我們的主題函數。

jpeg_quality定義上傳到WordPress的JPEG圖像的質量，或在WordPress的圖像編輯器中進行了編輯。

> wp_editor_set_quality定義了WordPress圖像編輯器中編輯的任何圖像的質量。對於JPEG圖像，因為我們已經指定了JPEG_QUELITY過濾器，所以這將覆蓋此過濾器。通過這些更改將我們的測試映像上傳到WordPress上，會產生以下結果：>

jpeg圖像

原始尺寸 - 原始文件大小：504KB，60％質量文件大小：504KB，保存：0％

500px x 500px - 原始文件大小：29kb，60％質量文件大小：14kb，保存：51％

400px x 400px - 原始文件大小：21kb，60％質量文件大小：10KB，保存：52％掌握WordPress中的圖像優化

> png圖像

>原始 500px x 500px > 400px x 400px 文件大小 697KB 354KB 236KB 60％質量文件大小 697KB 354KB 236KB 保存 0％ 0％ 0％ >您會注意到我們上傳的PNG映像沒有更改 - 這是因為JPEG_QUELITY過濾器僅影響JPEG映像，並且僅當我們通過媒體庫編輯圖像時，才使用WP_EDOTOR_SET_QUALITY。此外，我們的原始圖像沒有改變 - 這是因為WordPress僅將質量過濾器應用於調整大小的圖像。圖像壓縮：插件解決方案

>我們探索了圖像壓縮的工作原理，並使用在線工具運行了一些測試，但理想情況下，我們希望在WordPress中自動壓縮我們的圖像。這意味著我們並不依靠客戶（或我們自己）記住在將圖像上傳到WordPress之前使用第三方工具，而我們正在簡化過程。

有幾個WordPress插件，可提供自動圖像壓縮：>

ewww image Optimizer

使用各種JPEG，PNG和GIF壓縮庫/服務提供無損壓縮的EWWW Image Optimizer。它需要exec（）訪問，某些共享主機可能沒有 - 但是他們確實提供了ewww image Optimizer雲，這是對服務器上處理圖像的服務的付費。

>再次，對於有損壓縮，您需要支付API鍵，費率為1,000張圖像的價格為$1。

>要設置EWWW映像優化器，導航到插件>在WordPress管理接口中添加新的插件，然後搜索“ EWWW Image Optimizer”：

>單擊

>立即安裝

>按鈕，並在安裝後激活插件。

默認情況下，該插件將在我們的圖像上提供無損壓縮，無需進一步的配置。讓我們創建一個新帖子，並將我們的特色圖像設置為我們的測試圖像，以獲得一些結果：

jpeg圖像

原始尺寸 - 原始文件大小：504KB，有損耗的壓縮文件大小：503KB，保存：0.2％掌握WordPress中的圖像優化

500px x 500px - 原始文件大小：29kb，有損耗的壓縮文件大小：28kb，保存：3.5％掌握WordPress中的圖像優化

400px x 400px - 原始文件大小：21kb，有損耗的壓縮文件大小：20kb，保存：4.8％掌握WordPress中的圖像優化

> png圖像

原始尺寸 - 原始文件大小：697KB，有損耗的壓縮文件大小：669KB，保存：4％掌握WordPress中的圖像優化

500px x 500px - 原始文件大小：354KB，有損耗的壓縮文件大小：300kb，保存：15.3％掌握WordPress中的圖像優化

400px x 400px - 原始文件大小：236KB，有損耗的壓縮文件大小：200kb，保存：15.3％掌握WordPress中的圖像優化

>當“無損”地壓縮PNG圖像上的jpeg圖像時，我們可以獲得更好的性能，這是可以預期的。但是，這些圖像仍然很大，所以讓我們嘗試另一個提供有損壓縮的插件。

壓縮JPEG和PNG圖像

以及提供基於Web的圖像壓縮服務，TINYPNG還提供了一個WordPress插件，可以自動為JPEG和PNG圖像提供有損的壓縮。

>每月免費的前500張圖像壓縮是免費的。之後，每圖像壓縮的價格為0.009美元。

>要設置tinypng插件，導航到插件>在WordPress管理接口中添加新的插件，然後搜索“壓縮JPEG＆PNG images”：>

>單擊

>立即安裝

>按鈕，並在安裝後激活插件。接下來，通過訪問https://tinypng.com/developers獲取API密鑰，然後輸入您的姓名和電子郵件地址：

>您將收到帶有鏈接的電子郵件，以獲取您的API密鑰。單擊鏈接，並記下您的API密鑰：掌握WordPress中的圖像優化

在WordPress插件中，導航到設置>媒體，然後插入您的tinypng api鍵。您還可以選擇要壓縮的圖像尺寸 - 每個圖像大小每月都將500個免費分配壓縮的壓縮算作，因此，讓我們選擇原始圖像，頁面和帖子尺寸以進行測試：

>讓我們創建一個新帖子，並將我們的“特色圖像”設置為我們的測試圖像以獲取一些結果：

jpeg圖像

原始尺寸 - 原始文件大小：504KB，有損耗的壓縮文件大小：367KB，保存：27.2％掌握WordPress中的圖像優化

500px x 500px - 原始文件大小：29kb，有損耗的壓縮文件大小：19kb，保存：34.5％掌握WordPress中的圖像優化

400px x 400px - 原始文件大小：21kb，有損耗的壓縮文件大小：13kb，保存：38.1％掌握WordPress中的圖像優化

> png圖像

原始尺寸 - 原始文件大小：697KB，有損耗的壓縮文件大小：230kb，保存：67％掌握WordPress中的圖像優化

500px x 500px - 原始文件大小：354KB，有損耗的壓縮文件大小：94KB，保存：73％掌握WordPress中的圖像優化

400px x 400px - 原始文件大小：236kb，有損耗的壓縮文件大小：65kb，保存：73％掌握WordPress中的圖像優化

>單獨使用特定圖像大小和壓縮插件，我們可以將504KB JPEG圖像降低至13KB - 節省491KB，或在2 Mbps的連接中快1秒左右。對於697KB PNG，我們可以將其降低到65KB - 節省632KB，或在2 Mbps連接上更快的速度約1.2秒。

>現在我們已經優化了要在WordPress網站上交付的圖像，讓我們看看如何根據訪問者的位置和其他因素來優化這些圖像的交付。

內容輸送網絡（CDN）

>內容輸送網絡是大量服務器，通常分佈在世界各地的多個數據中心中。它們旨在提供靜態內容，例如文本，圖像，CSS和JavaScript，以及更大的文件下載。

> CDN也可以使用緩存和縮小，以確保交付的內容盡可能優化。由於CDN的地理位置，大多數將檢測到訪客的國家，並嘗試從最近的可用數據中心傳遞文本，圖像，CSS和JavaScript。這有助於減少響應時間和頁面加載時間，並減少服務器帶寬和加載服務器上的響應時間和加載。

讓我們看一下WordPress的兩個可用的CDN解決方案。

photon

光子被描述為：

…託管在WordPress.com上或JetPack連接的WordPress站點上的網站的圖像加速度和編輯服務。這意味著您的主機上的負載少，讀者的圖像更快

它會自動捕獲JPEG，PNG和GIF圖像，提供調整大小的版本以滿足瀏覽器的要求。如果我們在具有500px x 500px圖像的移動設備上查看WordPress網站，這將很有用，但是我們只需要250px x 250px版本。
>為了設置光子，我們需要安裝和激活噴氣背包。導航到插件>在您的WordPress管理接口中添加新的插件，然後搜索“ JetPack”：>

>單擊>立即安裝
>按鈕，並在安裝後激活插件。接下來，在WordPress管理菜單中單擊
jetpack
，然後單擊>連接到wordpress.com。（如果沒有一個，請不要擔心 - 您可以在這一點上註冊一個免費帳戶） 如果一切成功，您將被重定向到WordPress管理接口，在那裡您會看到幾個可用的模塊，包括光子。讓我們繼續通過單擊激活
按鈕來激活光子：> 現在激活
光子，並將圖像從其CDN中提供。 >讓我們查看我們的現有帖子和頁面，其中包含我們的TINYPNG優化的特色圖像。您會注意到這些圖像現在是從i2.wp.com提供的 - 這是Photon的CDN。我們可以獲取圖像源並調整調整大小參數以獲取原始的500px和400px版本，以測試優化的文件尺寸：
jpeg圖像原始尺寸 - 原始文件大小：504KB，有損耗的壓縮文件大小：318KB，保存：37％
500px x 500px - 原始文件大小：29kb，有損耗的壓縮文件大小：14kb，保存：51.7％
400px x 400px - 原始文件大小：21kb，有損耗的壓縮文件大小：10KB，保存：52.4％

> png圖像
原始尺寸 - 原始文件大小：697KB，有損耗的壓縮文件大小：239KB，保存：65.7％
500px x 500px - 原始文件大小：354KB，有損耗的壓縮文件大小：101KB，保存：71.5％ 400px x 400px - 原始文件大小：236KB，有損耗的壓縮文件大小：69kb，保存：70.8％ >我們仍然能夠實現與TinyPng相似的文件大小，我們的JPEG圖像在光子上的性能更好，並且我們的PNG圖像使用TINYPNG表現更好。
>第三方CDNS
如果您不想安裝JetPack，並使用隨附的其他功能（36模塊和計數！），則可以使用第三方CDN，例如MaxCDN。
這種方法的優點是，您不僅限於優化圖像交付；您可以指定CDN提供的CSS，JavaScript文件和其他靜態文件類型。我們還可以在WordPress安裝上保留圖像優化插件（例如TinyPng），以確保在存儲在CDN上之前對圖像進行了優化。如果您在一個具有更多CSS和JavaScript內容與圖像的網站上，那麼這可能是一個更好的解決方案。
>設置MaxCDN，轉到他們的網站，然後單擊
>獲取免費測試帳戶>按鈕。
>按照屏幕上的說明完成您的個人詳細信息。然後，您將收到一封電子郵件，允許您創建MaxCDN帳戶並開始。
>註冊後，您需要創建一個區域。區域本質上是一個網站。

要創建一個區域，請單擊主菜單中的“區域”選項，然後是
>創建拉動區域
>
>輸入拉動區域的名稱（通常是您的網站名稱），它是URL和一個可選標籤：

接下來，我們需要配置我們的WordPress安裝以使用MAXCDN。我們將使用W3 Total Cache，這是MaxCDN支持的WordPress插件。 >
>設置W3總緩存，導航到插件>在WordPress管理接口中添加新的插件，然後搜索“ W3 Total Cache”：

>單擊
>立即安裝>按鈕，並在安裝後激活插件。
>激活後，在WordPress管理菜單中導航到cdn> cdn，然後向下滾動到配置面板。

>單擊
>授權按鈕，複製授權密鑰，然後將其粘貼到插件的
授權密鑰字段中：> 如果一切都起作用，則應在屏幕上顯示A
鍵是有效的。單擊>保存所有設置
按鈕以完成配置。 > 重新加載您現有的頁面或帖子之一，您應該從CDN中看到CSS，JS和圖像。 > 結論
在本文中，我們審查了WordPress的許多圖像優化和CDN插件。 Photon CDN是JetPack插件的一部分，它提供了提供優化圖像的單個，最有效的解決方案，該圖像為所有分辨率縮放並從CDN提供 - 最重要的是，它是免費的。對於那些已經已經有CDN的人，或者不想使用它，或使用JetPack，Tinypng的WordPress插件會在PNG圖像上對Photon的圖像優化略有改進，並且可以與A相結合，從而有所改善第三方CDN提供商。

>在WordPress中掌握圖像優化的經常詢問的問題

>在WordPress中，圖像優化的好處是什麼？首先，它提高了網站的加載速度。大型，不優化的圖像可能會減慢您的網站，從而對用戶體驗和SEO排名產生負面影響。其次，優化的圖像使用較少的存儲空間，如果您採用有限的託管計劃，這可能是有益的。最後，優化的圖像看起來很專業且吸引人，可以增強您網站的整體美學和用戶參與度。
>
>圖像優化如何影響SEO？
>圖像優化在SEO中起重要作用。 Google之類的搜索引擎將網站加載速度視為排名因素。優化的圖像加載速度更快，提高了您的網站的速度，從而提高了其SEO排名。此外，具有正確優化的Alt標籤的正確優化的圖像可以幫助您的網站出現在圖像搜索結果中，吸引更多的網站流量。
>
>有什麼最佳的WordPress插件用於圖像優化？幾個出色的WordPress插件，用於圖像優化。一些最受歡迎的內容包括EWWW圖像優化器，Smush和shortpixel。這些插件在上載圖像時會自動壓縮並優化圖像，節省時間和精力。
>
>如何優化圖像而又不會丟失質量？

您可以在不使用無損的情況下優化圖像而不丟失質量壓縮，可以減小文件大小而不會降低圖像質量。許多WordPress圖像優化插件都提供此功能。此外，根據您的需求選擇正確的圖像格式（JPEG，PNG，GIF等）也可以幫助維持圖像質量。
>如何將alt標籤添加到WordPress中的images？
>
您可以通過轉到WordPress中的圖像中添加Alt標籤您的媒體庫，選擇圖像並填寫“ ALT文本”字段。 Alt標籤對於SEO和可訪問性很重要，因為它們描述了搜索引擎和視覺上受損的用戶的圖像內容。

我可以在WordPress中批量優化圖像嗎？
是的，是的，許多WordPress圖像優化插件讓您批量優化圖像。如果您有大量圖像可以優化，此功能可能非常有用。
>

>如何優化移動設備的圖像？

以優化移動設備的圖像，您可以使用響應式圖像，這些圖像可以調整以適合不同的屏幕尺寸。 WordPress會自動創建您上傳的每個圖像的幾個尺寸，並為每個設備提供最合適的尺寸。
>
>有損耗和無損壓縮之間有什麼區別？

通過刪除降低文件大小一些圖像數據，可能導致圖像質量損失。另一方面，無損壓縮會減小文件大小而無需刪除任何數據，保留原始圖像質量。
>
我應該在WordPress中優化一次圖像？
>理想情況下，您應該在您時優化圖像。將它們上傳到您的WordPress網站。這樣可以確保您的網站保持迅速，高效，從而提供最佳的用戶體驗。