切換菜單

WordPress 的最佳圖片壓縮工具 – 無損、有損、JPEG 和 PNG

已發表: 2018-03-29

Beaver Builder 產品 25% 折扣!快點促銷結束...精益更多!

Image Compression Solutions for WordPress
  • WordPress

WordPress 的最佳圖片壓縮工具 – 無損、有損、JPEG 和 PNG

今天,我們要討論一個我很關心的話題,影像壓縮!我是半開玩笑的,但是在不降低任何品質的情況下大幅削減圖像檔案大小會讓人感到奇怪的滿足。

這篇文章的靈感源自於 Beaver Builders Facebook 群組中一個非常受歡迎的貼文。我剛剛拍攝了一個關於在 ImageOptim 中啟用和使用 Google 新 Guetzli 演算法的影片教學課程,我對之前不熟悉的所有其他選項感到震驚。在本文中,我們將討論一些用於壓縮網路圖像的技巧和工具。

初步術語

在深入研究之前,讓我們先建立一些常用術語。

JPEG、PNG、SVG – 這是網路上最受歡迎的三種圖片檔案類型。在本教程中,我們將主要關注 JPEG 和 PNG,因為它們從壓縮和優化中獲益最多。

JPEG通常更適合高保真影像,例如沒有任何透明度的照片和網頁圖形。

PNG非常適合圖標、標誌或任何需要透明度的內容。 PNG 從 Photoshop 或您選擇的圖形編輯工具中出來後,還可以進行顯著優化。

無損和有損——這些是壓縮方法。無損壓縮意味著您的影像不會損失任何品質。從字面上看,根本沒有。這涉及從影像或任何不影響品質的內容中剝離元資料。

有損意味著壓縮演算法會降低影像品質。您將獲得更好的壓縮結果,但會犧牲影像品質。大多數有損壓縮工具都提供百分比滑桿,以便您可以選擇品質與檔案大小的平衡。

專業提示:對於大圖像背景,我經常會稍微模糊圖像或在照片上添加不透明的顏色層。減少細節和/或標準化顏色是一個很好的美學風格選擇,可以顯著減小檔案大小。您可以在我們的職位頁面上看到這一點。

我應該將圖像壓縮多少?

影像壓縮的目標是在不犧牲太多品質的情況下盡可能減小檔案大小。這與其說是一門科學,不如說是一門藝術,「可接受的品質」水準會根據具體情況而有所不同。

攝影工作室可能希望以最高品質突出他們的作品,而房地產網站可能願意犧牲品質以換取在頁面上顯示更多圖像。

大多數影像編輯軟體允許您以不同的品質匯出影像。不過,如果您使用專用的影像壓縮工具,有時最好為該軟體提供盡可能最好的質量,並讓其壓縮演算法從那裡開始工作。

圖片壓縮工具選項

正如我最近發現的,在影像壓縮工具和服務方面並不缺乏選擇。

影像優化

我開始使用 ImageOptim,並且仍然更喜歡它。 ImageOptim 僅適用於 OSX,但它支援 JPEG 和 PNG 檔案的有損和無損壓縮。它還可以配置為使用 Google 相對較新的壓縮演算法 Guetzli。 Guetzli 平均可以比其他演算法減少 20-30% 的檔案大小。

ImageOptim 是位於 Mac Dock 中的程序,您只需將圖像拖放到程式圖示上,它就會壓縮它們。我傾向於一次優化一兩個圖像,所以這個解決方案非常適合我。但是,如果您正在處理大量圖像或檔案大小較大的圖像,那麼其他一些選項可能是大型作業的更好選擇。

來自 WPMU Dev 的 Smush

Smush 是 WPMU Dev 的一款免費 WordPress 插件,可設定為優化 WordPress 安裝中和/或上傳到 WordPress 時的現有圖片。 Smush 很棒,因為繁重的工作是由 WPMU Dev 的伺服器完成的,它們可以優化圖像並調整圖像大小。

如果您正在為客戶建立網站(尤其是那些喜歡直接從數位相機上傳數兆位元組圖像的客戶),Smush 是一個設定好後就可以忘記的絕佳選擇。

小PNG

TinyPNG 是一個基於網路的圖片壓縮器。您可以上傳圖像(最多 5bm)並下載壓縮版本。這會耗盡頻寬,因此如果您的網路連線速度較慢或按使用付費,這可能不是最佳選擇。它支援 JPEG 和 PNG 檔案類型。它是免費的。它似乎沒有提供對壓縮品質等級的任何控制。

使用 TinyPNG 後,我想我仍然更喜歡 ImageOptim,但對於 Windows 用戶、快速一次性工作或專門尋找基於 Web 的壓縮器的用戶來說,這將是一個不錯的選擇。或者,如果您嘗試將處理卸載到雲端而不是本機。

想像

Imagify 是另一個基於 Web 的 SASS 選項,它提供了專用的 WordPress 插件,可以在您上傳圖像時或直接從 WordPress 管理區域優化圖像並調整圖像大小。 Imagify WordPress 外掛程式擁有令人印象深刻的 4.5 星平均評價,許多評論指出,使用 Imagify 實現的圖像品質比其他替代方案更好。

Imagify 有一個免費計劃,可讓您上傳和優化 2mb 以下的圖片。影像的最佳化版本將在 24 小時內從其伺服器上保持下載狀態。

JPEG迷你

JPEGMini 是一項 SASS 服務,應該會吸引那些尋求主力解決方案的人。想像一下,您的任務是為電子商務商店優化數以萬計的高解析度產品圖像。 JPEGMini 將使您能夠將所有處理工作轉移到他們可能是快速且最佳化的雲端伺服器上。

短像素

ShortPixel 是另一個基於 Web 的 SASS。如果您希望將映像壓縮卸載到雲端伺服器,那麼這是一個不錯的選擇。他們的免費計劃允許您每月優化多達 100 張圖像,他們還提供高級計劃,起價為每月 5 美元,還可提供更多圖像。 ShortPixel 還有一個 WordPress 插件,它們是 BB 團隊其他成員中最受歡迎的。

想像

你最喜歡什麼?

如果您訪問啟發這篇文章的原始 Facebook 帖子,您會看到其他幾個選項,以及出於各種原因更喜歡其中一個的人。我們錯過了你最喜歡的嗎?請在評論中告訴我們它是什麼以及您喜歡它的原因。

此外,如果你是那種吃、睡、呼吸都注重績效的人,那麼這篇採訪喬恩布朗關於現代績效最佳實踐的文章可能會很有吸引力。

羅比·麥卡洛的簡介

26 則評論

  1. Raygun 設計於 2018 年 3 月 28 日下午 1:31

    我們投票給Tinypng。我們喜歡他們的插件,它可以在您上傳到您的網站時進行最佳化 - 我們也喜歡 Panda!當我們使用 Mac 時,我們也會看看 ImageOptim。很棒的名單夥計們。



    • 羅比·麥卡洛2018 年 4 月 30 日上午 11:35

      哈哈。是的,大多數有動物吉祥物的公司都相當可靠。



  2. 保羅·斯蒂爾2018 年 3 月 28 日下午 4:30

    Tinypng 還有一個 Wordpress 外掛程式 https://wordpress.org/plugins/tiny-compress-images/,如果您需要在伺服器端進行設置,它們的 API 非常適合使用。



  3. 托比2018 年 3 月 28 日晚上 8:45

    傑出的。我剛開始使用 ShortPixel。設計精良、插件友善(啟用媒體替換)且具有成本效益。

    我真的很想看到一篇將 S3 Offload 與 Beaver 整合的文章,bb 外掛程式快取使其變得特別困難。



  4. 克里斯於 2018 年 3 月 29 日上午 9:02

    我用EWW。對於擁有大量圖像的網站,可以使用 CDN 進行無限許可。一次 10 個,請使用 https://ewww.io/online-image-optimizer/



  5. 米海2018年3月29日上午10:51

    我已經為我的 20 多個 WordPress 網站測試了所有 WordPress 圖像壓縮/優化插件,其中一些包含用戶生成的內容(即大圖像),對我來說,迄今為止最好的選擇是 ShortPixel。我發現他們的壓縮具有一流的品質/尺寸比,並且他們的定價模型很公平。另外 - 我不受檔案大小的限制,即使您使用免費計劃,它們也會完全優化。



  6. 迪拉傑·達斯 (Dhiraj Das)於 2018 年 3 月 31 日晚上 11:05

    我一直在使用TinyPNG,它們似乎在上傳後使圖像膨脹然後壓縮它(我可能是錯的,但我看到上傳後的圖像尺寸比實際尺寸更重)從不知道ImageOptim看起來非常方便工具。



  7. 盧卡斯2018 年 4 月 4 日上午 5:58

    不錯的評論。在上傳之前,我使用 webresizer.com 作為 TinyPNG 的替代品。它們可以讓您很好地控制最終產品。他們有一個批量縮放器/壓縮器,但它最好與大量大小相同的圖像一起使用。
    在我們的網站上,我發現 Imagify 運作良好。



  8. a305587於 2018 年 4 月 10 日上午 10:17

    這些服務非常棒,感謝您整理這份清單。

    我想指出的是,如果您已經在使用 Photoshop,您也可以透過 Photoshop 來完成此操作。不要“另存為...”,而是轉到:

    文件 –> 匯出 –> 儲存為 Web(舊版)

    然後在預設中更改為 JPEG 高、JPEG 中或 JPEG 低壓縮。然後點選「儲存」。這達到了與上述服務相同的結果。



    • 羅比·麥卡洛2018 年 4 月 10 日下午 3:11

      令人驚訝的是,其中許多工具和服務在減少檔案大小方面比 Photoshop 更好。



    • 湯姆阮 (Tom Nguyen)於 2018 年 5 月 2 日凌晨 3:07

      我對 Photoshop 也做了同樣的事情,但我相信 ImageOptim 和 Smush 會進一步減小檔案大小,而不會明顯降低品質。



  9. 傑克霍克斯2018 年 4 月 11 日上午 7:56

    我認為人們應該更認真地考慮 IMGIX 和 Cloudinary 等內容優化工具。



  10. 安·亞辛 (Ann Iashin)於 2018 年 4 月 15 日上午 8:56

    你最好使用壓縮器!它不使用互聯網,只是網站



  11. dmergus於 2018 年 4 月 19 日上午 6:52

    我們傾向於為顧客使用 Smush 和 Short Pixel。短像素提供更好的壓縮,但 Smush 也不錯,設定後就不用管它了。



  12. 格雷格·凱悅2018 年 4 月 23 日上午 7:25

    我非常喜歡在 OSX 上使用 ImageOptim!我在發送到網路的每張圖像上都使用它,無論它將在哪個平台上顯示!



  13. Sridhar Katakam於 2018 年 4 月 26 日晚上 7:10

    關於 ImageOptim 中的設定更改,您是否將最佳化等級保留為預設值 Extra?



    • 羅比·麥卡洛2018 年 4 月 30 日上午 11:34

      在大多數情況下,是的。



  14. 奧馬爾2018 年 4 月 26 日晚上 9:56

    我很驚訝沒有人提到 Kraken.io (https://kraken.io/)。它可以從他們的網頁介面使用或作為 WordPress 外掛。



    • 羅伯特·拉特利奇2018 年 5 月 3 日上午 10:07

      我使用 Chromebook,它看起來是一個不錯的選擇。我一直在使用http://guetzliconverter.linuxadm.hu/



  15. gelform於 2018 年 4 月 29 日上午 6:06

    我發現的最好的 PNG 庫是 PNGQuant,但很難讓它在本地工作。所以現在我透過使用 PNGQuant 的 http://compresspng.com/ 來運行所有映像。比 ImageOptim 有了巨大的改進。



  16. 湯姆阮 (Tom Nguyen)於 2018 年 5 月 2 日凌晨 3:05

    我使用過 ImageOptim 和 Smush 免費版本。我特別喜歡斯馬什。除了能夠一次優化更多影像之外,升級到付費版本還有其他好處嗎?



    • 羅伯特·拉特利奇2018 年 5 月 3 日上午 10:04

      在我看來,這比 Smush 的優化要好得多。



  17. BuildupYouth於 2018 年 10 月 26 日凌晨 2:07

    感謝您提供的清單.. 目前正在使用 WPMU Dev 的 Smush,並且運行良好..



  18. 羅納德·E·福特2018 年 11 月 21 日晚上 8:01

    我知道我可能已經過時了,但我可以透過 Fireworks 很好地控製映像壓縮。以我的拙見,這是最好的光柵/向量程式。



  19. 傑克霍克斯2018 年 11 月 22 日下午 1:09

    煙火曾經是一個很棒的節目。我已經很多年沒有使用它了,但是,也許是時候重新打開它,看看我有多想念它。



  20. Himani Bhardwaj於 2018 年 12 月 18 日晚上 10:46

    感謝這篇好文章!我正在為我的網站使用圖像優化器插件。



我們的電子報

我們的時事通訊是親自撰寫的,大約每月發送一次。這一點也不煩人,也不是垃圾郵件。
我們保證。

加入時事通訊

立即嘗試 Beaver Builder

Beaver Builder