在網(wǎng)站建設(shè)中，圖像通常是負(fù)責(zé)緩慢頁面加載時(shí)間的第一元素。通過選擇正確的文件格式和圖像壓縮組合，您可以更快地使您的網(wǎng)站，現(xiàn)在看看如何做到這一點(diǎn)。圖像通?？梢蕴岣呔W(wǎng)站的質(zhì)量，而且它們是實(shí)施視覺營銷策略的關(guān)鍵。但是，您的網(wǎng)站對(duì)媒體的影響越大，對(duì)您的加載時(shí)間的影響就越大。如果您的網(wǎng)站需要很長時(shí)間才能加載，它看起來多么令人驚嘆并不重要,它會(huì)嚇跑游客。
答案是壓縮或優(yōu)化您的圖像，使它們變小，而不會(huì)失去任何質(zhì)量。在本文中，我們將更多地討論圖像? 壓縮，它如何幫助您，以及使用數(shù)據(jù)來準(zhǔn)確展示它在加載時(shí)間方面可以產(chǎn)生多大的差異。
什么是圖像壓縮
圖像壓縮是優(yōu)化網(wǎng)站加載時(shí)間的絕佳方式。簡而言之，壓縮圖像涉及減小文件大小，因此占用的空間更少，有兩種方法：“有損”和“無損”。前者可以極大地優(yōu)化您的圖像，同時(shí)可能會(huì)降低視覺質(zhì)量，而后者只會(huì)盡可能地壓縮您的文件，而不會(huì)影響它們的外觀。
通常，您會(huì)想要進(jìn)行無損優(yōu)化。然而，有損技術(shù)的差異并不一定是肉眼可見的。讓我們看看左邊的原始圖像和右邊的優(yōu)化版本的示例：
如果你放大得足夠近，你應(yīng)該能夠發(fā)現(xiàn)一些差異。但是，由于我們沒有以全分辨率顯示任何一個(gè)圖像，因此差異很難得出?？紤]到許多網(wǎng)站的空間限制，當(dāng)壓縮的500KB版本同樣合適時(shí)，沒有理由上傳高質(zhì)量的5MB圖像。
無論如何，圖像優(yōu)化的主要好處是易于理解。圖形占用的存儲(chǔ)空間越小，頁面越輕。這意味著用戶可以更快地加載您的網(wǎng)站，這應(yīng)該會(huì)對(duì)其可用性和“粘性”產(chǎn)生直接影響?？紤]到這一點(diǎn)，讓我們看一下影響圖像壓縮對(duì)普通網(wǎng)站的性能有多大影響。
圖像壓縮會(huì)影響網(wǎng)站加載速度
沒有兩個(gè)網(wǎng)站會(huì)有相同的加載時(shí)間，因?yàn)樗鼈兌际仟?dú)一無二的。簡而言之，此測試的目的是確定（平均）影響圖像優(yōu)化對(duì)加載時(shí)間的影響程度。為此，我們建立了一個(gè)包含三個(gè)單獨(dú)頁面的網(wǎng)站，使用Rare構(gòu)建? 。第一頁包含? 主頁組合 布局，我們將其設(shè)置為包含十個(gè)圖像：
這些圖像都沒有被優(yōu)化，總共頁面重1.7MB。我們?cè)诖藴y試網(wǎng)站上也沒有任何活動(dòng)插件，以避免任何可能影響我們結(jié)果的元素。設(shè)置完所有內(nèi)容后，我們使用Pingdom Tools的? San Jose，California服務(wù)器測試了此頁面加載的時(shí)間? ：
稍后，我們將向您展示我們的測試結(jié)果。目前，我們將設(shè)置一個(gè)額外的Divi測試頁面，因此我們有更多數(shù)據(jù)來備份我們的結(jié)果。對(duì)于我們的第二次參賽，我們選擇了? Masonry Blog 布局，因?yàn)樗鼮槲覀兲峁┝艘粋€(gè)精美展示幾個(gè)特色圖像的機(jī)會(huì)（在本例中為七個(gè)）：
這個(gè)頁面的重量為1.3MB，與我們之前的例子一樣，具有相同的未優(yōu)化圖像集 - 只是使用不同的布局：
現(xiàn)在，我們將創(chuàng)建兩個(gè)頁面的碳副本，并用優(yōu)化版本替換它們的圖像。為此，我們將分別使用兩個(gè)不同的圖像優(yōu)化插件壓縮JPEG和PNG圖像? 以及? WP Smush。這里有大量的信息需要解壓縮，所以讓我們來談?wù)勥@些數(shù)字的含義。
結(jié)果告訴了什么
根據(jù)我們的結(jié)果，圖像優(yōu)化? 確實(shí) 對(duì)網(wǎng)站加載時(shí)間有重大影響。更具體地說，我們的測試發(fā)現(xiàn)，如果您優(yōu)化網(wǎng)站上的每個(gè)圖像，您可以預(yù)期加載時(shí)間至少會(huì)提高10％。有些人可能會(huì)認(rèn)為10％不足以證明壓縮網(wǎng)站上每個(gè)圖像的麻煩。但是，有很多方法可以在WordPress中自動(dòng)執(zhí)行該過程。如果你沒有這樣做，你基本上會(huì)說“不”以獲得更好的表現(xiàn)。
更重要的是，圖像優(yōu)化只是您應(yīng)在網(wǎng)站制作上實(shí)施的許多調(diào)整之一，以縮短加載時(shí)間。例如，可以考慮緩存，GZIP壓縮，使用優(yōu)化良好的主題以及許多其他方面。如果你實(shí)施所有這些，你的網(wǎng)站應(yīng)該非?？欤∽詈?，值得注意的是，10％是我們得分結(jié)果的低端。您的收益將取決于您的網(wǎng)頁平均包含的圖片數(shù)量，以及您使用的壓縮工具。很有可能，您的裝載時(shí)間可能會(huì)進(jìn)一步提高。但是，在您親自嘗試之前，您不會(huì)發(fā)現(xiàn)它。
結(jié)論
優(yōu)化圖像是減少網(wǎng)站加載時(shí)間的眾多方法之一。但是，通常很難想象它對(duì)整體性能的影響有多大。無論如何，WordPress提供了大量可用于優(yōu)化圖像的工具。如果您愿意，您甚至可以自動(dòng)執(zhí)行該過程，因此沒有理由避免它。
在我們的測試中，我們發(fā)現(xiàn)在大多數(shù)情況下，圖像壓縮可將加載時(shí)間提高10％左右。不過，這是規(guī)模的低端。在測試期間，我們看到了更好的結(jié)果，一直到24.29％的性能提升。您自己的結(jié)果很大程度上取決于您的網(wǎng)頁平均包含的圖片數(shù)量以及您使用的優(yōu)化工具。
