天天看點

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

作者:前端小智

圖像往往是任何特定網頁上最大的資源。雖然許多開發者花時間優化網頁性能的其他方面,但減少圖像的大小對性能的影響比所有其他方面加起來還要大。這篇文章将純粹關注于可用于減少圖檔大小的不同工具。

WebUtils Bulk Image Compress

位址:https://www.webutils.app/image-compress

WebUtils Bulk Image Compress 支援壓縮圖檔并将其轉換為 WebP、JPG、PNG、AVIF和 JXL。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

Compressor.Io

位址:https://compressor.io/

Compressor.io 支援有損或無損壓縮來優化JPEG、PNG、SVG、GIF和WebP,每個檔案最大可壓縮10MB。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

Imagecompresser.Com

位址:https://imagecompresser.com/

Imagecompresser.com 支援同時上傳多達10個檔案,支援PNG、JPEG、WebP、JPG和GIF格式。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

AnyWebP

位址:https://anywebp.com/

AnyWebP 是專門用于轉換WebP格式的圖檔,可以輸出為JPEG、PNG或ICO,也可以按檔案大小或品質進行定制,還可以選擇将幾乎任何檔案格式(TIFF、PSD、BMP等)轉換為WebP。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

Compressimage.Io

位址:https://compressimage.io/

Compressimage.io 支援離線的圖像優化,對檔案大小或檔案數量沒有限制。唯一的限制是隻能壓縮JPEG和PNG。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

JPEG.Rocks

位址:https://jpeg.rocks/

JPEG.rocks,顧名思義,是一個隐私友好的JPEG圖像優化器,完全是用戶端和開源的。對檔案大小或檔案數量似乎沒有限制,而且可以自定義輸出檔案的品質。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

Compressor.Js

位址:https://fengyuanchen.github.io/compressorjs/

Compressor.js 與本清單中的其他工具完全不同。它包括大約十幾種不同的設定,可以自定義圖像的品質、大小、MIME類型等等。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

Squoosh

位址:https://squoosh.app/

Squoosh是由Chrome實驗室團隊設計的。這個網絡應用僅限于一張圖檔,但它包括幾個選項,用于縮小尺寸、調色闆、選擇壓縮方法、壓縮品質等級,以及一系列其他進階設定。為這個工具提供動力的引擎也可以作為API或CLI用于批量處理。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

SVGOMG

位址:https://jakearchibald.github.io/svgomg/

SVGOMG是專門用于減少SVG圖形的大小。它是SVGO的一個GUI,是一個基于Node.js的工具。SVG優化器很有用,因為許多生成SVG的程式在生成圖像的SVG代碼中包含了多餘的和無用的資訊

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

Optimizilla

位址:https://imagecompressor.com/

Optimizilla 使用有損壓縮來減少JPEG、GIF和PNG圖像的大小。最多能上傳20張圖檔,可以選擇在下載下傳前為每張圖檔定制壓縮級别和品質。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

Shrink Me

位址:https://shrinkme.app/

Shrink Me 支援批量優化JPEG、PNG、WebP或SVG圖像,而且沒有明顯的品質損失。對檔案數量或檔案大小沒有限制。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

JPEG Stripper

位址:https://www.toolsley.com/jpegstrip.html

JPEG Stripper 通過剝離不必要的資料來優化JPEG檔案。一次隻允許上傳一張圖檔,是以這隻對JPEG格式的幾張圖檔有用。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

Shrink Media

位址:https://www.shrink.media/

Shrink Media 支援優化PNG、JPEG和WebP圖像,分辨率最高可達5000x5000,它也可以作為iOS或Android的移動應用程式。使用互動式滑塊來改變品質水準和照片尺寸。也可以粘貼圖檔的URL。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

OptimizeImages

位址:https://www.optimizeimages.com/

OptimizeImages 可以減少SVG、PNG、JPEG、WebP、GIF和AVIF的大小,支援轉換為WebP或AVIF。最多可以優化30張圖檔,并選擇一個壓縮品質選項(推薦、中等或超級)。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

ImagesTool.Com

位址:https://imagestool.com/

ImagesTool.com 包括許多不同的圖像處理工具。可以調整大小,轉換,壓縮圖像,以及更多。支援JPEG、WebP、SVG、GIF和APNG。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

AVPress

位址:https://avpress.zaps.dev/

AVPress有點不同,因為它是專門用于優化視訊檔案和GIF動畫的。一次隻能處理一個視訊或GIF,并包括幾個自定義和輸出設定。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

AVIF Converter

位址:https://avif.io/

AVIF Converter 可以将任何圖像格式轉換為 AVIF,這是一種下一代檔案格式,據稱比WebP、JPEG、PNG和GIF有更好的壓縮效果。這個應用程式似乎對檔案數量或檔案大小沒有任何限制,但請注意,AVIF格式尚未被所有現代浏覽器支援。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

TinyPNG

位址:https://tinypng.com/

TinyPNG是一個較早的工具,可以優化WebP、PNG或JPEG檔案。你一次最多可以上傳20個,每個大小不超過5MB。

整理了 40 餘種圖檔優化工具,論圖檔壓縮,直接甩給他這個清單

用于圖像優化的建構工具和CLI工具

到目前為止,所列舉的工具是手動批量處理或一次優化幾張圖檔的好選擇。但在一個大型項目的背景下,你會想考慮使用不同的工具,這些工具被設計成持續工作流程或建構過程的一部分。這裡有一些你可以考慮的選項:

  • SVGO是流行的SVG優化工具,是前面提到的SVGOMG背後的核心。
  • libSquoosh 是 Squoosh API,支援建構動态優化圖像的JavaScript程式
  • Squoosh CLI 是一個指令行工具,用于使用運作 Squoosh 的引擎。
  • pngquant是一個專門用于優化PNG圖像的指令行工具。
  • esbuild-squoosh

根據所使用的建構工具或任務運作程式的不同,前面提到的imagemin可能是你的所選工具的插件。下面是一些用于不同建構工具的imagemin插件:

  • rollup-plugin-imagemin是Rollup的一個插件,它使用imagemin來自動優化Rollup建構中的圖檔。
  • parcel-plugin-imagemin是另一個使用imagemin的插件,這次是為你的Parcel建構的。
  • [grot-contrib-imagemin](https://github.com/gruntjs/grunt-contrib-imagemin)是另一個imagemin插件,為那些仍然使用Grunt的人提供,Grunt是一個較老的任務運作器工具
  • ImageMinimizerWebpackPlugin是另一個imagemin插件,這次是與流行的JavaScript捆綁包webpack一起使用
  • snowpack-plugin-imagemin是一個imagemin插件,可與現代前端建構工具Snowpack一起使用。

其它工具

QOI

位址:https://qoiformat.org/

Quite OK 圖像格式是一種圖像格式,它将圖像無損壓縮到與PNG相似的大小,同時提供20倍至50倍的編碼速度和3倍至4倍的解碼速度。

JXL

位址:https://jpegxl.info/

不是一個工具,而是一個以JPEG XL圖像格式為中心的社群網站。

UPNG.js

位址:https://github.com/photopea/UPNG.js

這是流行的Photopea應用程式背後的PNG引擎,一個先進的PNG/APNG解碼器和編碼器,提供有損和無損優化。

Optimus

位址:https://github.com/Splode/optimus

一個本地的桌面應用程式,支援壓縮、優化和轉換圖像,支援JPEG、PNG和WebP格式。

ImageOptim

位址:https://imageoptim.com/mac

一個Mac應用程式和Sketch插件,用于減少圖像檔案大小。

pngcrush

位址:https://pmt.sourceforge.io/pngcrush/

一個傳統的圖像壓縮工具,可以通過指令行使用。

Trimage

位址:https://trimage.org/

一個原生的跨平台應用程式和指令行界面來優化JPEG和PNG圖像。

PNGGauntlet

位址:https://pnggauntlet.com/

一個較早的可配置的本地應用程式,适用于Windows、Mac和Linux,可優化PNG并将各種格式轉換為PNG。

Pngyu

位址:https://nukesaq88.github.io/Pngyu/

另一個使用pngquant進行PNG優化的本地應用程式。

總結

希望這個工具清單足以提供你所需要的任何東西來滿足你的圖像優化要求。

繼續閱讀