建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
相信我們，獨(dú)立站尤其是新建的站點(diǎn)，應(yīng)該知道如何去討好搜索引擎，也只有這樣才可以獲得更好的展現(xiàn)位置。 而，如何讓搜索引擎覺(jué)得你的站點(diǎn)更友好，其中一個(gè)辦法就是讓你的網(wǎng)站圖片更加小以提升網(wǎng)站性能。
為點(diǎn)軍等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及點(diǎn)軍網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、點(diǎn)軍網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
如果是單純的簡(jiǎn)單粗暴地不考慮質(zhì)量地壓縮圖像，只會(huì)適得其反，因?yàn)檫@樣可能會(huì)使訪問(wèn)者討厭您的網(wǎng)站。 我們要做的是，在不損害或者極小程度地圖像質(zhì)量下壓縮圖像。 有一些技巧可以讓你減少圖像的文件大小，并保證質(zhì)量，讓用戶(hù)無(wú)感知你對(duì)圖片壓縮過(guò)。 因此，讓我們來(lái)看看如何格式化圖像而不會(huì)讓它們變得難看，以及如何針對(duì)網(wǎng)頁(yè)和性能優(yōu)化圖像。
大圖像會(huì)降低您的網(wǎng)頁(yè)速度，從而導(dǎo)致用戶(hù)體驗(yàn)不佳。 優(yōu)化圖像，可以使用插件或腳本減小文件大小以加快頁(yè)面的加載時(shí)間。 有損和無(wú)損壓縮是常用的兩種方法。
- 格式化圖像的好處
- 如何針對(duì)Web和性能優(yōu)化圖像
- 使用WordPress圖像優(yōu)化插件
- 優(yōu)化圖像案例研究
- 將SVG與其他圖像一起使用
- 使用圖像時(shí)的最佳做法
格式化圖像的好處
首先，為什么需要格式化圖像？ 有什么好處？ 優(yōu)化圖像以提高性能有很多好處。 根據(jù)HTTP Archive，截至2018年11月，圖像平均占網(wǎng)頁(yè)總體積的21％。 因此，在優(yōu)化您的WordPress網(wǎng)站時(shí)，圖像是您應(yīng)該首先開(kāi)始的第一個(gè)地方！
它比優(yōu)化腳本和字體更重要。 圖像優(yōu)化工作流程是最容易實(shí)現(xiàn)的工作之一，但許多網(wǎng)站所有者忽略了這一點(diǎn)。
每頁(yè)平均字節(jié)數(shù)（KB）
以下是主要優(yōu)點(diǎn)。
- 它將提高您的頁(yè)面加載速度（請(qǐng)參閱下面的案例研究，了解它對(duì)您的速度有多大影響）。如果您的頁(yè)面需要很長(zhǎng)時(shí)間來(lái)加載，訪客可能不愿意等待并跳出。有關(guān)優(yōu)化頁(yè)面加載時(shí)間的詳細(xì)信息，請(qǐng)參閱《如何做到Google PageSpeed Insights測(cè)試滿(mǎn)分/100分》。
- 使用WordPress搜索引擎優(yōu)化插件，幫助你提高了網(wǎng)站的SEO。您的網(wǎng)站在搜索引擎結(jié)果中的排名會(huì)更高。大文件會(huì)降低您的網(wǎng)站速度，搜索引擎討厭網(wǎng)站速度慢（爬蟲(chóng)在爬取頁(yè)面內(nèi)容過(guò)程中，如果服務(wù)器響應(yīng)過(guò)慢，爬蟲(chóng)可能就會(huì)離開(kāi)或者降低網(wǎng)站的爬取頻率）。搜索引擎也可能更快地抓取您的圖片并將其編入索引，以便進(jìn)行圖片搜索。想知道您的流量中有多少來(lái)自圖片搜索？您可以使用Google Analytics或者百度統(tǒng)計(jì)細(xì)分來(lái)檢查圖片搜索流量。
- 創(chuàng)建備份會(huì)更快。
- 較小的圖像文件大小使用較少的帶寬。
- 服務(wù)器上需要的存儲(chǔ)空間更少（這取決于您優(yōu)化的縮略圖數(shù)量）
如何針對(duì)Web和性能優(yōu)化圖像
格式化圖像的主要目標(biāo)是在最小文件體積和可接受質(zhì)量之間找到平衡點(diǎn)。 優(yōu)化圖像的方法不止一種。 最流行的方法之一是在上傳到WordPress之前簡(jiǎn)單地壓縮它們。 通常，這可以在Adobe Photoshop或Affinity Photo等工具中完成。 其中一些任務(wù)也可以使用插件執(zhí)行，我們將在下面詳細(xì)介紹。
要考慮的兩個(gè)主要問(wèn)題是您使用的文件格式和壓縮類(lèi)型。 通過(guò)選擇正確的文件格式和壓縮類(lèi)型組合，您可以將圖像大小減少多達(dá)5倍。 您將不得不嘗試使用每種圖像或文件格式來(lái)查看最佳效果。
選擇正確的圖像格式
在開(kāi)始修改圖像之前，請(qǐng)確保選擇了最佳文件類(lèi)型。 您可以使用幾種類(lèi)型的文件：
- PNG – 生成更高質(zhì)量的圖像，但文件也會(huì)比較大。無(wú)損圖像格式，雖然它也可能是有損的。
- JPEG – 使用有損和無(wú)損優(yōu)化。 您可以調(diào)整質(zhì)量級(jí)別，以實(shí)現(xiàn)質(zhì)量和文件大小的良好平衡。
- GIF – 僅使用256種顏色。 這是動(dòng)畫(huà)圖像的最佳選擇。 它只使用無(wú)損壓縮。
還有其他幾個(gè)，例如JPEG XR和WebP，但并非所有瀏覽器支持。 理想情況下，色彩豐富的圖像應(yīng)該選擇JPEG（或JPG）和相對(duì)簡(jiǎn)單的圖像選擇PNG。
壓縮質(zhì)量及體積
下面是一個(gè)例子，說(shuō)明壓縮圖像過(guò)多會(huì)發(fā)生什么。 第一種是使用非常低的壓縮率，這導(dǎo)致最高質(zhì)量（但更大的文件大?。?第二種是使用非常高的壓縮率，這導(dǎo)致圖像質(zhì)量非常低（但文件尺寸較?。?。 注意：未經(jīng)修改的原始圖像為2.06 MB。
低壓縮（高質(zhì)量）JPG – 590 KB
高壓縮 (低質(zhì)量) JPG – 68 KB
如您所見(jiàn)，上面的第一張圖片是590 KB。 這對(duì)于一張照片來(lái)說(shuō)非常大！ 一般網(wǎng)站的頁(yè)面我們應(yīng)該保持總體積不超過(guò)1或2MB。 590KB已經(jīng)是其中的四分之一。 第二個(gè)圖像顯然看起來(lái)很糟糕，但只有68 KB。 你要做的是在你的壓縮率（質(zhì)量）和文件大小之間找到一個(gè)平衡點(diǎn)。
因此我們以中等壓縮率再次壓縮圖像，如下所示，質(zhì)量還是很不錯(cuò)的，文件大小為151 KB，這對(duì)于高分辨率照片來(lái)說(shuō)是可以接受的。 這比壓縮率低的原始照片小近4倍。 通常，像PNG圖像應(yīng)該低于100 KB或更低，以獲得最佳性能。
中等壓縮 (質(zhì)量OK) JPG – 151 KB
有損與無(wú)損優(yōu)化
同樣重要的是要了解有兩種類(lèi)型的壓縮可以使用——有損和無(wú)損。
有損 – 這是一個(gè)刪除一些數(shù)據(jù)的過(guò)濾器。這會(huì)降低圖像質(zhì)量，因此您必須小心為圖像的減重。文件大小可以減少很多。您可以使用Adobe Photoshop，Affinity Photo或其他圖像編輯器等工具調(diào)整圖像的質(zhì)量設(shè)置。我們上面使用的示例是使用有損壓縮。
無(wú)損 – 這是一個(gè)壓縮數(shù)據(jù)的過(guò)濾器。這不會(huì)降低質(zhì)量，但需要在渲染之前對(duì)圖像進(jìn)行解壓縮。您可以使用Photoshop，F(xiàn)ileOptimizer或ImageOptim等工具在桌面上執(zhí)行無(wú)損壓縮。
最好嘗試使用不同壓縮技術(shù)，以了解哪種方法最適合每種圖像或格式。如果您的工具有選項(xiàng)，請(qǐng)確保保存為Web圖像。這是許多圖像編輯器中的一個(gè)選項(xiàng)，它將為您提供質(zhì)量調(diào)整，以便您可以執(zhí)行最佳壓縮。圖像會(huì)損失些質(zhì)量，所以嘗試找到最佳平衡，盡可能在減少體積的同時(shí)又不影響質(zhì)量。
圖像優(yōu)化工具和程序
有許多選擇的圖像優(yōu)化工具和程序，包括付費(fèi)和免費(fèi)的，您可以使用它們來(lái)優(yōu)化您的圖像。 有些為您提供了優(yōu)化的工具，而其他一些則直接幫你做了這事。 Affinity Photo是個(gè)非常不錯(cuò)的選擇，相比Adobe Photoshop，價(jià)格更便宜，但擁有幾乎相同的功能。
使用Affinity Photo壓縮圖像
以下是一些我們收集的可用于圖像壓縮的工具和程序：
- Adobe Photoshop
- Gimp
- Paint.NET
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- pngquant
- FileOptimizer
- ImageOptim
- Trimage
- ImageResize.org
調(diào)整圖像大小以縮放
在過(guò)去，您需要按比例上傳圖像并且不要讓CSS調(diào)整它們的大小。 但是，自WordPress 4.4版本以來(lái)，WordPress開(kāi)始支持響應(yīng)式圖像（不按CSS縮?。?。 基本上，WordPress會(huì)自動(dòng)為上傳到媒體庫(kù)的每個(gè)圖像創(chuàng)建幾種尺寸。 通過(guò)將圖像的可用大小包含到srcset屬性中，瀏覽器現(xiàn)在可以選擇下載最合適的大小而忽略其他大小。 請(qǐng)參閱下面的代碼示例截圖。
srcset響應(yīng)圖像示例代碼
如今滿(mǎn)大街的HiDPI顯示器，動(dòng)不動(dòng)就是4K分辨率，響應(yīng)式圖像是必須的了。 但2x或3x您的網(wǎng)站的列或div大小，仍然小于原始大小。 瀏覽器將根據(jù)設(shè)備的分辨率顯示合適Size的圖像。
WordPress媒體庫(kù)根據(jù)您的設(shè)置創(chuàng)建縮略圖。 但是，原件仍然保留并且不受影響。 如果您想通過(guò)不保存原件來(lái)調(diào)整圖像大小并節(jié)省服務(wù)器硬盤(pán)空間，可以使用像Imsanity這樣的免費(fèi)插件。
WordPress多媒體設(shè)置
Imsanity允許您設(shè)置限制，以便將所有上傳的圖像約束到合理的大小，這足以滿(mǎn)足典型網(wǎng)站的需求。 Imsanity在WordPress處理圖像處理圖片。 因此，WordPress在所有方面的行為都完全相同，除非在上傳之前貢獻(xiàn)者將其圖像縮放到合理的大小。
使用WordPress圖像優(yōu)化插件
值得慶幸的是，使用WordPress，您不必手動(dòng)完成所有圖像格式化或壓縮。 您可以使用插件自動(dòng)完成這些操作。 一些插件會(huì)在您上傳圖像文件時(shí)自動(dòng)優(yōu)化它們，甚至?xí)?yōu)化您已上傳的圖片。 這是一個(gè)非常貼心的功能 – 特別是如果您網(wǎng)站的存量圖片過(guò)多。 下面介紹一些最好的插件來(lái)格式化圖像以獲得更好的性能。
但有一點(diǎn)非常重要，即不應(yīng)該100%依賴(lài)插件本身。 例如，您不應(yīng)將2MB圖像上傳到WordPress媒體庫(kù)。 這可能會(huì)導(dǎo)致您的Web主機(jī)硬盤(pán)空間很快就耗盡。 最好的方法是事先在照片編輯工具中快速調(diào)整圖像大小，然后上傳它并使用以下插件進(jìn)一步減少它。
- Imagify Image Optimizer
- ShortPixel Image Optimizer
- Optimole
- EWWW Image Optimizer Cloud
- Optimus Image Optimizer
- WP Smush
- TinyPNG
- ImageRecycle
- Jetpack Image CDN
- Compress JPEG & PNG Images
Imagify Image Optimizer
WordPress圖像優(yōu)化插件-Imagify
Imagify是由開(kāi)發(fā)WP Rocket的團(tuán)隊(duì)創(chuàng)建的，大多數(shù)人都可能熟悉它。 兼容WooCommerce，NextGen Gallery和WP Retina。 它還具有批量?jī)?yōu)化功能，您可以選擇三種不同的壓縮級(jí)別，正常，激進(jìn)和超級(jí)。 它還提供恢復(fù)功能，因此如果您對(duì)質(zhì)量不滿(mǎn)意，可以一鍵恢復(fù)并重新壓縮，使其更符合您的需求。 插件提供免費(fèi)和高級(jí)版本，其中免費(fèi)版本比較摳門(mén)只有25MB的配額。
WordPress圖像優(yōu)化插件-Imagify
Imagify還支持在第三方服務(wù)器上壓縮圖像，而不是你的，這在性能方面非常重要。這樣Imagify就不會(huì)減慢你的WordPress網(wǎng)站。
ShortPixel Image Optimizer
WordPress圖像優(yōu)化插件-ShortPixel
ShortPixel Image Optimizer是一款免費(fèi)插件，每月可壓縮100張圖片，并支持壓縮多種類(lèi)型的文件，包括PNG，JPG，GIF，WebP甚至PDF文件。 它提供有損和無(wú)損圖像壓縮，且支持將CMYK轉(zhuǎn)換為RGB。 它會(huì)將您的圖像和縮略圖放入云中進(jìn)行處理，然后再傳回你網(wǎng)站服務(wù)器以替換原件。 插件會(huì)創(chuàng)建原始文件的備份，以便您可以根據(jù)需要手動(dòng)還原它們。 插件也支持批量轉(zhuǎn)換圖庫(kù)文件，文件大小也沒(méi)有限制。
步驟 1：請(qǐng)求免費(fèi)的ShortPixel API密鑰
安裝并啟用插件后，插件會(huì)要求提供一個(gè)API密鑰。這會(huì)在您的站點(diǎn)和ShortPixel優(yōu)化工具之間建立連接。
如果您還沒(méi)有API密鑰，您可以申請(qǐng)一個(gè)免費(fèi)的API密鑰。只需輸入您的電子郵件地址，然后單擊Request Key。將為您生成一個(gè)密鑰，您還將設(shè)置一個(gè)ShortPixel帳戶(hù)。輸入并驗(yàn)證密鑰后，您將進(jìn)入ShortPixel 插件設(shè)置屏幕。
步驟 2：配置優(yōu)化設(shè)置
如果您不想配置ShortPixel插件，您可以單獨(dú)保留默認(rèn)設(shè)置。但是，如果您確實(shí)想自定義插件，則可以在此處進(jìn)行。讓我們快速瀏覽一下常規(guī)設(shè)置選項(xiàng)卡，這是大多數(shù)用戶(hù)所需要的。
在這里，您可以決定是否希望該插件也優(yōu)化您的縮略圖、設(shè)置要應(yīng)用于所有文件的壓縮級(jí)別以及刪除EXIF數(shù)據(jù)。您還可以備份原始圖像，并選擇是否希望插件自動(dòng)調(diào)整圖像大小。
當(dāng)您對(duì)這些設(shè)置感到滿(mǎn)意時(shí)，單擊“保存更改”。或者，如果您想立即開(kāi)始優(yōu)化現(xiàn)有圖像，您可以選擇保存并轉(zhuǎn)到批量處理。
步驟 3：批量壓縮現(xiàn)有圖像
ShortPixel插件將自動(dòng)壓縮您將來(lái)上傳的所有圖像，但它也使您能夠優(yōu)化現(xiàn)有圖像。您可以使用Bulk Optimization Too 來(lái)實(shí)現(xiàn)，您可以通過(guò)WordPress 中的Media > Bulk ShortPixel訪問(wèn)它。
在這里，您將看到站點(diǎn)上現(xiàn)有圖像的數(shù)量，包括縮略圖。
要開(kāi)始該過(guò)程，請(qǐng)單擊“Start Optimizing”按鈕。您可以實(shí)時(shí)查看每個(gè)圖像的壓縮方式，包括節(jié)省的空間總量。
該過(guò)程完成后，您將看到一條消息，確認(rèn)所有原始圖像都已備份并替換為壓縮版本。從現(xiàn)在開(kāi)始，您無(wú)需擔(dān)心圖片會(huì)拖慢您的網(wǎng)站速度！
Optimole
WordPress圖像優(yōu)化插件-Optimole
Optimole是一個(gè)WordPress圖像優(yōu)化插件，可以自動(dòng)減少圖像的大小，無(wú)需任何手動(dòng)工作。 它在您的網(wǎng)站加載速度方面具有很大的優(yōu)勢(shì)，因?yàn)樗耆谠?，并且從不提供比它們?yīng)該更大的圖像，做到兼顧訪客和瀏覽器兩者。
此外，該插件提供延遲加載和高效的圖像替換 – 如果訪問(wèn)者的互聯(lián)網(wǎng)連接速度較慢，它會(huì)降低圖像質(zhì)量 – 這使其在人群中脫穎而出。 它還會(huì)自動(dòng)檢測(cè)用戶(hù)的瀏覽器，根據(jù)實(shí)際展示W(wǎng)ebP格式圖像。
Optimole壓縮的所有圖像都通過(guò)快速CDN提供。 您可以免費(fèi)試用Optimole，如果您需要額外的帶寬和處理空間，可以考慮升級(jí)到付費(fèi)套餐。
EWWW Image Optimizer Cloud
WordPress圖像優(yōu)化插件-EWWW Image Optimizer Cloud
EWWW Image Optimizer Cloud可幫助您縮小圖像，加快網(wǎng)站創(chuàng)建速度，減少麻煩。沒(méi)有大小限制和足夠的靈活性，您可以使用默認(rèn)值，或完全根據(jù)自己的喜好自定義插件。所有EWWW IO用戶(hù)都可以使用批量?jī)?yōu)化程序壓縮其現(xiàn)有圖像，或使用“媒體庫(kù)”列表模式選擇要壓縮的特定圖像。
可以?huà)呙杵渌募A，以確保您網(wǎng)站上的每個(gè)圖像都經(jīng)過(guò)適當(dāng)優(yōu)化。 EWWW IO甚至允許您將圖像轉(zhuǎn)換為WebP等下一代格式，或者為具有多格式轉(zhuǎn)換選項(xiàng)的圖像找到最佳圖像格式。圖片壓縮的起價(jià)僅為0.003美元/張。
Optimus Image Optimizer
WordPress圖像優(yōu)化插件-Optimus Image Optimizer
Optimus WordPress Image Optimizer使用無(wú)損壓縮來(lái)優(yōu)化您的圖像。 無(wú)損意味著您不會(huì)看到任何質(zhì)量損失。 它支持WooCoomerce和多站點(diǎn)，并且對(duì)于那些已經(jīng)很大的現(xiàn)有媒體庫(kù)的人來(lái)說(shuō)，它提供很好的批量?jī)?yōu)化功能。 它還與WP Retina WordPress插件兼容。 插件也是提供免費(fèi)和付費(fèi)版本。 在付費(fèi)版本中，您每年支付一次，您可以不限量壓縮圖像。 如果將它與Cache Enabler插件結(jié)合使用，您還可以深入了解WebP圖像，這是Google提供的一種新的輕量級(jí)圖像格式。
WP Smush
WordPress圖像優(yōu)化插件-WP Smush
WP Smush有免費(fèi)版和高級(jí)版。 它將減少圖像中的隱藏信息，以減小尺寸而不降低質(zhì)量。 當(dāng)您將圖像上傳到您的網(wǎng)站時(shí)，它會(huì)掃描圖像并減少它們。 它還會(huì)掃描您已上傳的圖像并減少這些圖像。 它將同時(shí)批量刷新多達(dá)50個(gè)文件。 如果需要，您也可以手動(dòng)執(zhí)行。 它支持JPEG，GIF和PNG圖像類(lèi)型，不過(guò)文件大小限制為1MB。
- 它與一些最流行的媒體庫(kù)插件兼容，如WP All Import和WPML。
- 所有圖像優(yōu)化均采用無(wú)損壓縮技術(shù)，保持高圖像質(zhì)量。
- 保存圖像的目錄無(wú)關(guān)緊要.Smush找到并壓縮它們。
- Smush可以選擇自動(dòng)設(shè)置所有圖像的寬度和高度，因此所有圖像的大小都會(huì)調(diào)整為相同的比例。
TinyPNG (also compressed JPGs)
WordPress圖像優(yōu)化插件-TinyPNG
TinyPNG使用TinyJPG和TinyPNG服務(wù)（免費(fèi)帳戶(hù)允許您每月壓縮大約100張圖像）來(lái)優(yōu)化您的JPG和PNG圖像。 它將自動(dòng)壓縮新圖像并批量壓縮現(xiàn)有圖像。 它會(huì)將CMYK轉(zhuǎn)換為RBG以節(jié)省空間。 它可以壓縮高達(dá)60％的JPEG圖像和高達(dá)80％的PNG圖像，而不會(huì)出現(xiàn)明顯的圖像質(zhì)量損失。 它沒(méi)有文件大小限制。
ImageRecycle
WordPress圖像&PDF優(yōu)化插件-ImageRecycle
ImageRecyle插件是一個(gè)圖像和PDF自動(dòng)優(yōu)化器。 一個(gè)非常方便的功能是能夠設(shè)置壓縮的最小文件大小。 例如，如果設(shè)置圖像大小為80 KB，則自動(dòng)將它們從壓縮中排除。 這可以確保圖像和文件永遠(yuǎn)不會(huì)被過(guò)度壓縮。 它還包括批量?jī)?yōu)化和自動(dòng)圖像大小調(diào)整。 注意：他們有15天的免費(fèi)試用期，但這是一項(xiàng)付費(fèi)服務(wù)，并且使用服務(wù)器上傳和壓縮圖像。 它們不是每月收費(fèi)，而是按壓縮的圖像總數(shù)收費(fèi)，10美金起步。
Jetpack Image CDN
Jetpack是一款流行的WordPress工具包插件，包含基于服務(wù)CDN形式的圖像優(yōu)化。該模塊以前稱(chēng)為Photon，可讓您通過(guò)切換單個(gè)設(shè)置（位于Jetpack > Settings > Writing）來(lái)加快網(wǎng)站上圖像的加載時(shí)間。
Image CDN利用image_downsize過(guò)濾器快速優(yōu)化文章和頁(yè)面上的圖像，包括特色圖像和縮略圖。選擇加速圖像和照片設(shè)置后，您的所有文章都將使用 Image CDN 優(yōu)化其圖像。
主要特征：
- 自動(dòng)調(diào)整優(yōu)化圖像的大小，這樣它們就不會(huì)影響您選擇的主題的外觀。
- 非常容易設(shè)置。
- 過(guò)濾內(nèi)容而不更改數(shù)據(jù)庫(kù)中的圖像信息。
Jetpack插件的免費(fèi)版本包含完整的Image CDN功能，但也提供高級(jí)計(jì)劃。
Compress JPEG & PNG Images
Compress JPEG & PNG Images對(duì)于 TinyPNG 的用戶(hù)來(lái)說(shuō)會(huì)很熟悉；這是該工具的插件版本。這使您可以直接從您的站點(diǎn)使用 TinyPNG 服務(wù)，這使其成為對(duì)用戶(hù)最友好的選項(xiàng)之一。
該插件將每個(gè)上傳的圖像發(fā)送到 TinyPNG 服務(wù)，以自動(dòng)確定壓縮圖像的最佳方式。然后對(duì)該圖像進(jìn)行優(yōu)化并返回到您的站點(diǎn)。壓縮 JPEG 和 PNG 圖片還可以批量壓縮您現(xiàn)有的文件。
主要特征：
- 使您能夠自動(dòng)調(diào)整圖像大小。
- 壓縮動(dòng)畫(huà)圖像。
- 將圖像從 CMYK 轉(zhuǎn)換為 RGB，以節(jié)省額外空間。
這個(gè)插件可以免費(fèi)使用，每月最多可免費(fèi)壓縮500張圖片。之后，您可以以每張圖像0.009美元的價(jià)格購(gòu)買(mǎi)額外的壓縮包。TinyPNG提供了一個(gè)方便的價(jià)格計(jì)算器，可用于根據(jù)您的要求估算價(jià)格。
優(yōu)化圖像案例研究
下面進(jìn)行自己的小案例研究和測(cè)試，向您展示圖像優(yōu)化對(duì)網(wǎng)絡(luò)的影響及您的WordPress網(wǎng)站的整體速度。
未壓縮的JPG
我們首先將6個(gè)未壓縮的JPG上傳到測(cè)試站點(diǎn)，所有這些JPG都超過(guò)1 MB。然后通過(guò)Pingdom進(jìn)行了5次測(cè)試并取平均值。 從下面的速度測(cè)試中可以看出，總加載時(shí)間為1.55秒，總頁(yè)面大小為14.7 MB。
未壓縮JPG圖像網(wǎng)站測(cè)速
壓縮過(guò)的JPG
然后，使用Imagify WordPress插件使用“激進(jìn)設(shè)置（aggressive setting）”壓縮JPG。然后通過(guò)Pingdom進(jìn)行了5次測(cè)試并取平均值。 從下面的速度測(cè)試中可以看出，總加載時(shí)間減少到476毫秒，總頁(yè)面大小減少到2.9 MB。 也就是說(shuō)總加載時(shí)間減少了54.88％，頁(yè)面大小減少了80.27％。
壓縮JPG圖像后網(wǎng)站測(cè)速結(jié)果
網(wǎng)站幾乎沒(méi)有其他優(yōu)化可以讓您的加載時(shí)間減少50％以上。 這就是圖像優(yōu)化如此重要的原因，上面的過(guò)程全部由插件自動(dòng)完成。
通過(guò)優(yōu)化圖片，無(wú)論是使用照片編輯工具還是使用WordPress插件，您還可以修復(fù)Google PageSpeed Insights中的“優(yōu)化圖片”警告（如下所示）。
PageSpeed Insights 優(yōu)化圖像警告
如果您發(fā)現(xiàn)Google PageSpeed Insights有其他更多的優(yōu)化，可以閱讀《如何做到Google PageSpeed Insights測(cè)試滿(mǎn)分/100分》深入了解網(wǎng)站優(yōu)化，又或者嘗試使用更多的網(wǎng)站優(yōu)化工具，更全面了解網(wǎng)站加載緩慢的原因，參見(jiàn)《網(wǎng)站測(cè)速性能測(cè)試深入淺出教程[附15款常用網(wǎng)站測(cè)速工具]》。
使用SVG格式圖形
另一個(gè)建議是將SVG與其他圖像一起使用。 SVG是一種可縮放的矢量格式，適用于徽標(biāo)，圖標(biāo)，文本和簡(jiǎn)單圖像。 以下是幾個(gè)原因：
- SVG可在瀏覽器和照片編輯工具中無(wú)限縮放。
- 主流搜索引擎均索引SVG，就像它對(duì)PNG和JPG一樣，所以你不必?fù)?dān)心SEO。
- SVG傳統(tǒng)上（并非總是）文件大小小于PNG或JPG。 這可以加快加載時(shí)間。
國(guó)外博主Genki寫(xiě)了一篇很棒的文章，他比較了SVG、PNG和JPEG三者的大小。 以下是他測(cè)試中的一些內(nèi)容，他比較了三種不同的圖像類(lèi)型。
JPG (優(yōu)化后的體積: 81.4 KB)
JPG圖像
PNG (優(yōu)化后的體積: 85.1 KB)
PNG圖像
SVG (優(yōu)化后的體積: 6.1 KB)
SVG圖形
如您所見(jiàn)，與JPG相比，SVG的文件大小減少了92.51％。 與PNG相比，為92.83％。
使用圖像時(shí)的最佳做法
以下是一些關(guān)于如何針對(duì)Web優(yōu)化圖像的一般最佳實(shí)踐：
- 如果使用WordPress插件，請(qǐng)使用在其服務(wù)器上外部壓縮和優(yōu)化圖像的插件。這樣可以減少了您自己網(wǎng)站的負(fù)擔(dān)。
- 盡可能使用矢量圖像以及PNG和JPG
- 使用CDN加速向全球訪問(wèn)者提供圖像
- 刪除不必要的圖像數(shù)據(jù)
- 裁剪空白區(qū)域并使用CSS提供填充來(lái)重新創(chuàng)建它
- 盡可能使用CSS3效果
- 將圖像保存在適當(dāng)?shù)某叽?。雖然記得WordPress現(xiàn)在支持響應(yīng)式圖像來(lái)提供它們，而無(wú)需使用CSS調(diào)整它們。
- 使用Web字體而不是在圖像中放置文本 – 縮放時(shí)它們看起來(lái)更好并占用更少的空間
- 僅對(duì)具有大量形狀和細(xì)節(jié)的場(chǎng)景使用光柵圖像
- 將位深度減小到較小的調(diào)色板
- 盡可能使用有損壓縮
- 嘗試找到每種格式的最佳設(shè)置
- 如果需要?jiǎng)赢?huà)，請(qǐng)使用GIF（但壓縮GIF動(dòng)畫(huà)）
- 如果您需要高細(xì)節(jié)和高分辨率，請(qǐng)使用PNG
- 使用JPG獲取常規(guī)照片和屏幕截圖
- 刪除所有不需要的圖像元數(shù)據(jù)
- 盡可能自動(dòng)化流程
- 在某些情況下，您可能希望延遲加載圖像以加快第一頁(yè)渲染速度
- 在Photoshop等工具中將圖像保存為“針對(duì)Web優(yōu)化”圖像
- 在Chrome中使用WebP格式圖像可以提供較小的圖像
在對(duì)圖片進(jìn)行格式化以獲得更好的性能并遵循最佳做法后，搜索引擎，瀏覽器和網(wǎng)絡(luò)將更好地加載您的網(wǎng)站，并為您的讀者提供加載更快網(wǎng)站。
如果你關(guān)于這個(gè)話(huà)題有什么要補(bǔ)充的，歡迎在下面的評(píng)論中告訴我們您的技術(shù)和做法！
新聞名稱(chēng)：詳解如何優(yōu)化壓縮WordPress博客圖片
URL標(biāo)題：http://www.5511xx.com/article/dhcsoso.html
