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