建站
咨詢
售后
建站咨詢
新聞中心
根據(jù)HTTP Archive，截至2018年12月，圖像占桌面和移動設(shè)備平均網(wǎng)站頁面權(quán)重的40%以上。那是巨大的！當(dāng)談到新的移動優(yōu)先索引和性能時，圖像優(yōu)化對于wordpress網(wǎng)站的加載速度起著至關(guān)重要的作用。圖像壓縮是您可以實施的最簡單的優(yōu)化之一，反過來也會產(chǎn)生最大的影響。從本質(zhì)上講，這需要通過使用兩種流行的壓縮形式來減小圖像的文件大小：有損和無損。WEBP支持兩種壓縮方式！
今天我們將深入研究有損和無損這兩種類型的圖像壓縮，并討論我們建議您使用哪一種。這可能因您經(jīng)營的業(yè)務(wù)類型而異。
- 有損壓縮
- 無損壓縮
- 哪種壓縮方法更好？
- 如何在 WordPress 中使用有損壓縮
有損壓縮
第一種壓縮形式是有損的。有損壓縮涉及消除圖像中的一些數(shù)據(jù)。因此，這意味著您可能會看到性能下降（質(zhì)量下降或某些人稱之為像素化）。所以你必須小心你減少了多少圖像。不僅是因為質(zhì)量，還因為你無法逆轉(zhuǎn)這個過程。當(dāng)然，有損壓縮的一大好處以及為什么它是最流行的壓縮方法之一是您可以將文件大小減少很多。
- JPEG和GIF都是有損圖像格式。
- JPEG非常適合需要快速加載時間的站點，因為您可以調(diào)整質(zhì)量級別以獲得質(zhì)量和文件大小的良好平衡。
WordPress自動壓縮圖像
您知道WordPress在您將JPEG上傳到媒體庫時會自動壓縮它們嗎？默認(rèn)情況下，WordPress會自動將圖像壓縮至原始大小的90%。但是，從WordPress 4.5開始，他們將這一比例提高到82%，以進一步全面提高性能。如果您想知道為什么您的圖像在新安裝的WordPress上看起來有點像素化，這就是原因。
雖然自動壓縮很棒，但我們通常看到82%遠(yuǎn)不足以真正影響您網(wǎng)站的性能。因此，如果需要，您可以通過將以下過濾器添加到主題functions.php文件來禁用此選項。請記住，在編輯您的網(wǎng)站之前，請務(wù)必先進行備份。
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );
如果你想提高WordPress的自動壓縮率，你可以添加過濾器并降低原始文件的百分比，例如下例中的70%。
add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );
請記住，這些不會影響已上傳的圖像。您需要使用像Regenerate Thumbnails這樣的插件才能將其應(yīng)用到您現(xiàn)有的媒體庫中?；蛘吒玫氖?，我們只是建議您不要理會您的主題，只需使用圖像優(yōu)化 WordPress 插件（我們將在下面進一步介紹）或在上傳圖像之前進一步壓縮圖像。
使用Save for Web（軟件）壓縮圖像
您可以使用Adob??e Photoshop、Affinity Photo、Affinity Designer或其他圖像編輯器等工具來調(diào)整圖像的質(zhì)量設(shè)置（如下所示）。在大多數(shù)工具中，它位于“保存到網(wǎng)絡(luò)”或“導(dǎo)出設(shè)置”下。
更改照片質(zhì)量
如果我們對有損壓縮率進行一些比較，我們可以看到 50% 看起來不錯。33% 的一些背景細(xì)節(jié)開始變得有點模糊（但會很不明顯），而5%顯然是不可接受的。這只是為什么WordPress中的自動82%還不夠的一個例子。您可以而且應(yīng)該以更高的速率壓縮以進一步減小文件大小。
- original.JPG 2.82 MB（2,000 像素 x 1463 像素）
- lossy-compressed-1.JPG：227 KB（2,000 像素 x 1463 像素） 減少91.95%
- lossy-compressed-2.JPG：185 KB（2,000 像素 x 1463 像素） 減少93.44%
- lossy-compressed-3.JPG：5 KB（2,000 像素 x 1463 像素） 減少99.82%
有損壓縮比較
假設(shè)您選擇使用50%壓縮率的壓縮包。文件大小為227KB，這絕對比原來的2+MB文件小很多。但是，如果這只是頁面上15個以上的其他圖像之一，那仍然不是很好。通常，如果可能，最好將所有圖像保持在100KB 以下。在我的情況下，你應(yīng)該能夠變得更小。所以這是調(diào)整圖像大小也很重要的地方。50%的圖像首先縮小到 1251 像素 x 916 像素，只有95KB。
但請記住，您可能不想一直縮小圖像的大小，因為從WordPress 4.4開始，它現(xiàn)在支持響應(yīng)式圖像（未通過CSS縮?。ordPress會自動為上傳到媒體庫的每個圖像創(chuàng)建多種尺寸。通過將圖像的可用尺寸包含到srcset屬性中，瀏覽器現(xiàn)在可以選擇下載最合適的尺寸并忽略其他尺寸。請參閱下面的代碼實際外觀示例。
代碼中的srcset響應(yīng)式圖像示例
因此，隨著如今越來越多的HiDPI顯示器，找到一個合適的媒介是件好事。假設(shè)是您網(wǎng)站的列或div大小的2倍或3倍，但仍小于原始大小。瀏覽器將根據(jù)設(shè)備的分辨率顯示正確的。
谷歌推薦有損壓縮
您使用Google PageSpeed Insights嗎？如果是這樣，您可能熟悉“優(yōu)化圖像”的警告。早在 2017 年，谷歌實際上更新了他們的文檔，現(xiàn)在推薦使用有損壓縮作為進一步加快網(wǎng)站速度的一種方式。
Google PageSpeed Insights優(yōu)化圖像警告
如果你想擺脫這些警告，最簡單的方法之一就是使用有損壓縮來安撫谷歌。
無損壓縮
現(xiàn)在是時候深入研究無損壓縮的第二種形式了。與有損壓縮不同，無損壓縮不會降低圖像質(zhì)量。這怎么可能？它通常通過刪除不必要的元數(shù)據(jù)（由捕獲圖像的設(shè)備生成的自動生成的數(shù)據(jù)）來完成。但是，這種方法的最大缺點是您不會看到文件大小的顯著減小。換句話說，它會隨著時間的推移占用大量磁盤空間。
- RAW、BMP、GIF和PNG是無損圖像格式。
- 您可以使用Photoshop、FileOptimizer或ImageOptim等工具在桌面上執(zhí)行無損壓縮 。
- 一些插件會將 Gzip壓縮 應(yīng)用于圖像（縮小它們）。
如果我們對有損壓縮率進行一些比較，我們可以看到，在使用無損壓縮時，您不會損失任何質(zhì)量。但是，圖像的文件大小僅減少了10.84%。相比之下，使用有損壓縮時超過90%。
- original.JPG：227KB（2,000 像素 x 1463 像素）
- lossless-compressed.JPG：203KB（2,000 像素 x 1463 像素）
無損壓縮對比
哪種壓縮方法更好？
這個問題的答案實際上取決于你。對于大多數(shù)用戶，我們建議使用有損壓縮，因為您可以輕松地將圖像壓縮超過70%（有時甚至超過90%?。┒粫斐商蟮馁|(zhì)量損失。將此乘以頁面上的15張圖像，它將在減少您網(wǎng)站的加載時間方面發(fā)揮重要作用。不僅如此，有損壓縮將確保您使用盡可能少的磁盤空間。這反過來意味著您可以節(jié)省托管費用。
無損壓縮適用于那些無法承受任何質(zhì)量損失的人。攝影師、美食博主和模特只是少數(shù)依靠像素完美的圖像謀生的人。在這些情況下，您必須將圖像托管在CDN上。由于大小，您甚至可能需要將它們卸載到第三方存儲服務(wù)，例如Amazon S3或Google Cloud Storage。
如何在WordPress中使用有損壓縮
如果您仍然在有損和無損之間感到困惑，請不要擔(dān)心，您可以從許多出色的圖像優(yōu)化WordPress插件中進行選擇，這些插件會自動應(yīng)用有損壓縮：
- Imagify（有損和無損）
- WP Smush（有損和無損）
- EWWW Cloud（有損和無損）
- ShortPixel（有損和無損）
注意：上面列出的所有服務(wù)器都使用自己的第三方服務(wù)器來壓縮圖像。出于性能原因，您應(yīng)該始終在異地批量壓縮圖像。
下面將向您展示Imagify是如何工作的。他們有一個免費的計劃，但即使是他們的專業(yè)計劃的價格也非常合理。我們優(yōu)化了相當(dāng)多的圖像，我們正在使用“精簡版”計劃（每月1GB）就好了。每年支付，每月不到4.25美元。
Imagify具有三個不同的優(yōu)化級別：
- Normal：此模式使用無損壓縮，這意味著您的圖像不會丟失任何質(zhì)量，但它們的大小也不會減少太多。
- Aggressive： 此模式使用有損壓縮并大幅節(jié)省初始權(quán)重，同時略微降低圖像質(zhì)量。大多數(shù)時候它甚至不明顯。
- Ultra： 此模式使用有損壓縮并應(yīng)用所有可用優(yōu)化以實現(xiàn)最大圖像壓縮。這將大大節(jié)省初始重量，但您很可能會注意到一些圖像質(zhì)量下降。
Imagify設(shè)置
演示使用Aggressive模式，通常會根據(jù)圖像節(jié)省 60-70%。注意：實際上我們使用的PNG比JPEG多得多，因為我們的大多數(shù)圖像都是圖標(biāo)和插圖，而不是照片。
圖像壓縮文件節(jié)省
您可以在上傳時啟用自動優(yōu)化圖像（我們建議您不要忘記）或在媒體庫中使用它們的批量圖像優(yōu)化器。您也可以讓它備份原始圖像。這使您可以在以后實際將圖像轉(zhuǎn)換為其他優(yōu)化級別，甚至可以恢復(fù)原始圖像。如果您不使用此功能，我們建議您將其關(guān)閉以節(jié)省磁盤空間。
您通常應(yīng)該事先調(diào)整圖像大小，但Imagify確實具有調(diào)整更大圖像的功能，以防您忘記或沒有時間。除了有損壓縮，這是另一個大文件大小節(jié)省程序！
Imagify調(diào)整圖像大小
事實上，我們最近才在整個WordPress媒體庫中使用了批量圖像優(yōu)化功能。如您所見，它減少了700MB以上！這在前端性能方面是巨大的。
批量圖像優(yōu)化節(jié)省
速度測試
讓我們做一個小測試！由于我們經(jīng)?？吹接脩羯蟼魑磯嚎s的全分辨率圖像，因此我們將對此進行一些比較，這會影響您網(wǎng)站的整體性能。
測試 1 – 原始未壓縮
我們首先上傳了10張未壓縮的圖像。然后我們在Pingdom上進行了5次測試并取平均值。我們可以看到總加載時間為3.04秒，總頁面大小為28.4MB。
- uncompressed-1.jpg (2.82 MB)
- uncompressed-2.jpg (2.82 MB)
- uncompressed-3.jpg (2.82 MB)
- uncompressed-4.jpg (2.82 MB)
- uncompressed-5.jpg (2.82 MB)
- uncompressed-6.jpg (2.82 MB)
- uncompressed-7.jpg (2.82 MB)
- uncompressed-8.jpg (2.82 MB)
- uncompressed-9.jpg (2.82 MB)
- uncompressed-10.jpg (2.82 MB)
未壓縮速度測試（Pingdom）
測試 2 – 壓縮
然后我們再次上傳完全相同的圖像，但這次我們在 Imagify 插件中啟用了“自動優(yōu)化”。然后我們再次在 Pingdom 上進行了 5 次測試并取平均值。
- compressed-1.jpg (69.3 KB)
- compressed-2.jpg (69.3 KB)
- compressed-3.jpg (69.3 KB)
- compressed-4.jpg (69.3 KB)
- compressed-5.jpg (69.3 KB)
- compressed-6.jpg (69.3 KB)
- compressed-7.jpg (69.3 KB)
- compressed-8.jpg (69.3 KB)
- compressed-9.jpg (69.3 KB)
- compressed-10.jpg (69.3 KB)
我們可以看到總加載時間現(xiàn)在是522毫秒，總頁面大小為901.4KB。因此，我們的有損壓縮圖像將頁面加載時間減少了 82.83%！ 總頁面大小也減少了驚人的 96.83%。多虧了 Imagify，我們的圖像看起來仍然是高質(zhì)量的。
速度測試壓縮（Pingdom）
小結(jié)
一旦確定了您網(wǎng)站上所需的圖像質(zhì)量，您就可以選擇是否要使用有損或無損壓縮。同樣，對于那些更關(guān)心速度而不是質(zhì)量的人，我們建議使用有損壓縮。請記住，如果您找到正確的平衡，有損壓縮圖像會看起來很漂亮。如果您需要像素完美的圖像，那么您應(yīng)該始終使用無損壓縮。
網(wǎng)站標(biāo)題：為什么以及如何在WordPress網(wǎng)站上使用有損壓縮圖片
標(biāo)題URL：http://www.dlmjj.cn/article/ccsioch.html
