Why is 80% quality considered the magic number?

Across a lot of before-and-after testing at real viewing size, JPEG or WebP quality around 80% is where the file has shrunk 60–70% from maximum but the artifacts are still invisible without pixel-peeping. Go higher and you pay a lot of bytes for detail no one sees; go much lower and gradients start to band. It's the best balance for web use, which is why it's the default I reach for.

What is the best image format for websites in 2026?

WebP is the best default — roughly 25–35% smaller than JPEG with effectively universal browser support. For maximum savings, use AVIF (about 50% smaller than JPEG) served with a WebP fallback in a element. Convert with the Format Converter. Keep genuine vector art like logos as SVG rather than compressing them as raster.

What is the difference between lossy and lossless compression?

Lossless compression rearranges data more efficiently without discarding any of it, so the result is pixel-for-pixel identical to the original — PNG works this way. Lossy compression permanently removes data your eye is unlikely to notice, achieving far higher savings — JPEG works this way. Lossless typically yields 10–40% reduction; lossy commonly yields 60–90%. Use lossless for text and graphics, lossy for photographs.

Should I resize an image before or after compressing?

Always resize first. Compressing a large image and then shrinking it wastes compression effort on pixels that the resize discards, leaving a file that's both bigger and lower quality than it should be. Resize to the display dimensions first, then compress the smaller image — that order produces the smallest, cleanest result.

Is it safe to compress images with an online tool?

Most online compressors upload your images to their servers to process them, which is a concern for personal photos or client work. The Image Compress tool on toolz.dev runs entirely in your browser using the canvas API, so your images never leave your device — safe for anything private or proprietary.

Why is compressing the same image twice a bad idea?

Lossy compression discards detail, and doing it twice discards it twice — the second pass adds fresh artifacts on top of the first pass's, and none of it comes back. This is why you should always keep the original and generate every compressed version from it, rather than compressing a file that was already compressed once.

How do I know if my images are too large?

Run Google Lighthouse or PageSpeed Insights against your page; both flag oversized images and suggest better sizes. A quick rule of thumb: if any single image is over 200 KB, it's worth optimizing, and hero images especially should sit well under that since they drive Largest Contentful Paint. Feed the offenders through the resize-convert-compress workflow and re-audit.

How do I compress an image to a specific file size like 200 KB or 1 MB?

Resize to the display dimensions first, then step the quality down until you clear the target: start at 80%, and if you're still over, try 70%, then 60%. The Image Compress tool shows the output size as you move the slider, so you can watch it cross the threshold rather than guessing and re-exporting. Switching the format to WebP usually buys you another 25–35% at the same quality setting, which is often enough on its own.

Does compressing an image reduce its resolution or dimensions?

No — compression and resizing are separate operations. Compressing a 3000×2000 photo leaves it 3000×2000; it just stores those pixels using fewer bytes, at the cost of some fine detail. If you want fewer pixels, that's a resize, and it's the change that usually saves the most weight. Doing both, in that order, is what turns a 6 MB camera file into a 90 KB web image.

影像壓縮指南:在不損失品質的情況下減少檔案大小

我曾經花了一個完整的下午說服了一位客戶'由於我的 React 程式碼中的渲染錯誤,網站速度很慢。分析組件、記憶內容、追逐重新渲染。實際問題是背景英雄圖像:以 100% 品質保存 3.1 MB JPEG,而以 80% 品質保存的完全相同的圖像將是 480 KB,並且看起來相同。我對應用程式進行了過度設計,並且低估了資產。 That'這是一種非常開發者浪費一天的方式。

從那時起,影像壓縮一直是我檢查的第一件事,而不是最後一件事。它'也是最容易被誤解的 - "壓縮而不損失品質和報價;當真的它時,會被視為一個悖論'這只是知道哪個槓桿丟棄數據以及哪個槓桿不丟棄數據的問題't。本指南是我使用的心理模型,是在運送工具 z。dev 和調整時建立的核心網路生命徵象在客戶端網站上:壓縮的實際工作原理、何時使用有損與無損,以及為什麼一個特定的品質數字不斷獲勝。

TL;DR: 使用圖像壓縮網路照片的品質約為 80% - that'是文件縮小 60% 至 80% 的最佳點,您仍然可以'在正常尺寸下將其與原始文件區分開來。壓縮 來自原件 (永遠不要重新壓縮 JPEG),而且總是如此調整大小壓縮前顯示尺寸。為了最大程度地節省, 轉換照片至網路P 首先。所有內容都在您的瀏覽器中運行 - 沒有上傳任何內容。

當你壓縮影像時實際上會發生什麼's?

數位影像是一個像素網格,每個像素都儲存顏色。 That'為什麼原始影像是巨大的。 24 位元顏色的 1920×1080 影像是:

1920 × 1080 × 3 bytes = 6,220,800 bytes ≈ 5.93 MB

一張圖片近六兆位元組。在一行文字載入之前,包含 10 個的頁面下載量為 60 MB。壓縮的存在是為了使其能夠生存,並且它以兩種根本不同的方式之一來實現這一點。

無損壓縮 在資料中找到模式並對它們進行更緊湊的編碼,而不會丟棄任何東西。解壓縮影像與原始影像逐像素相同。技術很優雅:遊程編碼折疊&引用;紅色、紅色、紅色、紅色、紅色、紅色&引用;進入&引用;5×紅色&引用;;字典編碼(PNG's 核心的 Deflate 演算法)以短代碼取代重複出現的模式;預測過濾將每個像素儲存為與預測值的差異,因此平滑的梯度會變成長時間的微小數字,壓縮效果很好。 PNG、無損 WebP 和無損 AVIF 都是這樣運作的。

有損壓縮 透過丟棄視覺系統不太可能注意到的數據,可以實現更大的節省 - 並且它'比&quot更聰明;刪除一些像素。"它將影像從 RGB 轉換為亮度加色彩模型(您的眼睛對亮度比對顏色更敏感),然後降低顏色通道的分辨率,同時保持亮度清晰。它將影像分解為區塊,將每個區塊轉換為頻率係數,並將高頻區塊(微妙的紋理和雜訊)舍入到更少的值。量化這一舍入步驟就是資料實際遺失的地方。 JPEG、有損 WebP 和有損 AVIF 都遵循這條弧線。

實際結果:無損適用於每個像素都有意義的圖像 - 標誌、螢幕截圖、圖表、任何文字清晰的圖像。 Lossy 適用於照片和自然影像,其中 "看起來相同"重要的遠不止 " 是逐位相同的。"

Side-by-side comparison of JPEG quality levels at 100%, 85%, 70%, and 50% with file sizes

品質設定實際上意味著什麼?

&報價;品質80%&報價;是一個在不知道自己買什麼的情況下設定的數字。這裡'這是我用於 JPEG 和有損 WebP 的地圖,基於真實觀看大小下的許多前後比較。

100%(最大): 幾乎從來都不是正確的選擇。檔案通常大於 80% 的 3.5×,沒有明顯的改進。那個浪費下午的英雄形像被保存在這裡。

85 分享95%(高): 對於微妙細節真正重要的攝影作品集和影像。在 90% 的情況下,即使在 100% 縮放下,大多數觀眾也無法看到文物。

75×85%(網狀最佳點): 比最大值小 60% 至 70%,在正常觀看尺寸下不可見偽影。這是幾乎所有網路圖像所屬的地方。

50%75%(攻擊性): 對於尺寸至關重要的縮圖和預覽。如果您仔細觀察,文物就會開始以平滑的梯度和精細的紋理顯示。

低於 50%: 可見的塊狀和色帶。保留它以獲得真正的低優先級圖像或硬尺寸限制。

PNG 沒有'有一個"品質&報價;滑桿,因為它'無損 - 您以不同的方式優化它。壓縮等級 (0 calve9) 將編碼時間換成更小的文件,其中 6 個是合理的預設值。當影像使用少量顏色時,減少顏色深度會有很大幫助:16 色徽標從 24 位元下降到 8 位元,顯著縮小,可見變化為零。剝離元資料 - EXIF、顏色設定檔、時間戳 - 修剪永遠不會影響圖片的位元組。

WebP 是我對 Web 的預設值:在品質 80 時,它的運行速度比同等品質的 JPEG 小 25-35%,而且它還執行無損模式,比 PNG 低約四分之一。 AVIF 的壓縮更加困難 - 通常比 JPEG 小 50% 以上 - 但編碼速度更慢,並且為 #39;我透過 WebP 後備來提供服務,而不是單獨使用它。

您應該壓縮到哪種格式?

選擇格式是一半的壓縮戰,決策比選項看起來更簡單。這裡's 比較 I'd 交出新隊友:

格式	類型	對比。 JPEG 尺寸	透明度	最好
JPEG	有損	基線	不	電子郵件中的照片,通用後備
巴布亞紐幾內亞	無損	對於照片來說要大得多	是的	螢幕截圖、標誌、文字、圖表
網路P	兩者	25-DIR35% 小	是的	網路照片和圖形的預設值
阿維夫	兩者	~50% 小	是的	最大節省,並具有 WebP 後備功能

最常見的格式錯誤 - 以及 I'在程式碼審查中捕獲它的次數比我數得的還要多 - 正在將照片保存為 PNG。因為 PNG 是無損的,因此保存為 PNG 的照片可能比 85% 品質的 JPEG 的同一張照片大很多倍,沒有明顯的差異。 PNG 適用於具有硬邊和文字的圖形,而不是自然圖像。使用 JPEG 或 WebP 拍攝照片,您可以收回大部分臃腫的頁面'一次更改的權重。

轉換是兩鍵操作格式轉換器. 我實際提供的模式讓瀏覽器協商:

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Description">

那個 srcset 將瀏覽器遞給多種尺寸,然後讓其下載適合該裝置的尺寸,因此手機永遠不會拉動桌面圖像。結合正確的格式,它'快速網站和慢速網站之間的差異。

什麼'壓縮網頁影像的正確順序?

訂單比任何單獨的設定都重要,而出錯是大多數"背後的安靜錯誤。我壓縮了它,它'仍然很大"抱怨。每次的順序:

首先調整大小。 壓縮將以 800×600 方式顯示的 4000×3000 影像會浪費即將丟棄的像素上的精力,結果仍然遠大於必要的值。調整大小顯示尺寸(視網膜為雙倍) 之前觸摸壓縮機。這次重新排序修復的超大影像問題比任何品質調整都多。

轉換第二。 使用將照片移至 WebP(或帶有後備功能的 AVIF) 格式轉換器. You'現在正在壓縮更小、格式更好的影像。

壓縮第三。 跑圖像壓縮對於有損網路影像,在 80% 左右,然後判斷結果 以實際觀看尺寸- 沒有放大到 400%,因為沒有人以這種方式查看網頁。

為了具體起見,這裡'我在真實頁面上運行的 Web 最佳化遍:使用 Lighthouse 審核以查找重圖像,將每個圖像調整到其顯示大小,轉換為 WebP,壓縮為 75 °80%,然後重新運行 Lighthouse 進行確認。典型的結果是總影像權重減少 50 °80%,最大內容繪畫可測量跳躍 - 這是最初讓我走完整個路徑的指標。

為了更廣泛地了解調整大小、格式選擇、背景刪除以及壓縮圖像工具指南涵蓋完整的工具包。

哪些壓縮錯誤成本最高?

少數錯誤造成了大多數浪費的位元組和最明顯的品質損壞。 I'已經完成了其中的每一個。

重新壓縮已壓縮的 JPEG。 每輪有損壓縮都會在舊偽影之上堆疊新的偽影,並且損壞是累積的和永久的。始終壓縮 來自原始來源,並保留這些原始版本 - 從中產生每個壓縮版本,而不是從先前的壓縮副本產生。

使用 PNG 拍攝照片。 上面涵蓋了,但是它'當你發現它時,這是最大的單次勝利:一張 5 MB PNG 照片變成一張 500 KB JPEG,沒有明顯的差異。

過度壓縮。 將 JPEG 降至 30% 會形成具有可見塊狀和條帶狀的微小檔案。保持 75 ±85% 的網路速度,並以實際尺寸進行測試以找到您的樓層。

跳過調整大小步驟。 如上所述,在調整大小之前進行壓縮會產生比應有的大且品質更低的檔案。

忽略現代格式。 當 WebP 可用時提供 JPEG 無緣無故地保留了 25.35% 的潛在節省。

如果你想客觀地檢查你的工作,感知指標是存在的--SSIM高於0.95一般是"視覺上無損,"和谷歌' Butteraugli 分數低於 1.0 的平均差異本質上是看不見的 - 但老實說,對於日常工作,以實際大小並排查看原始版本和壓縮版本幾乎可以告訴您數學的所有內容。

常見問題

如何在不損失品質的情況下壓縮影像?

對於真正的、像素完美的無損壓縮,請使用 PNG 或無損 WebP。對於"視覺上無損" - 沒有什麼區別 - 使用 JPEG 或 WebP,品質為 80% 至 90%。這圖像壓縮該工具可讓您在下載之前設定品質並將原始版本與壓縮版本進行比較,以便您可以找到尺寸下降但圖像看起來仍然未觸及的確切點。

為什麼 80% 的品質被認為是神奇的數字?

在真實檢視大小、JPEG 或 WebP 品質的許多前後測試中,大約 80% 的檔案比最大值縮小了 60±70%,但在沒有像素窺視的情況下,偽影仍然是不可見的。走得更高,你會花很多位元組來獲取沒人看到的細節;走得更低,梯度開始帶。 It'是網路使用的最佳平衡,這就是它'是我達到的預設值。

2026 年網站的最佳圖像格式是什麼?

WebP 是最好的預設值 - 比 JPEG 小約 25.35%,具有有效的通用瀏覽器支援。為了最大程度地節省開支,請使用 AVIF(比 JPEG 小約 50%),並在 a 中提供 WebP 後備功能 <picture> 元素。與轉換格式轉換器. 將真正的向量藝術(如標誌)保留為 SVG,而不是將它們壓縮為光柵。

有損壓縮和無損壓縮有什麼區別?

無損壓縮可以更有效地重新排列數據,而不會丟棄任何數據,因此結果與原始數據逐像素相同 - PNG 都是這樣工作的。有損壓縮會永久刪除您眼睛不太可能注意到的數據,從而實現更高的節省 - JPEG 就是這樣工作的。無損通常會減少 10.40%;有損通常會產生 60.90% 的收益。使用無損文字和圖形,使用無損照片。

我應該在壓縮之前或之後調整影像大小嗎?

始終先調整大小。壓縮大圖像,然後縮小它,會浪費對調整大小丟棄的像素的壓縮工作,留下一個'的檔案。品質比應有的更大、更低。首先調整顯示尺寸的大小,然後壓縮較小的影像 - 此順序會產生最小、最乾淨的結果。

使用線上工具壓縮影像安全嗎?

大多數線上壓縮器都會將您的圖像上傳到伺服器進行處理,這是個人照片或客戶工作的問題。這圖像壓縮 tool on toolz。dev 完全在瀏覽器中使用 canvas API 運行,因此您的圖像永遠不會離開您的裝置 - 對於任何私人或專有的東西都是安全的。

為什麼將同一影像壓縮兩次是個壞主意?

有損壓縮會丟棄細節,執行兩次會丟棄兩次 - 第二次會在第一次傳遞和#39 的頂部添加新的工件;s,而且沒有一個會回來。這就是為什麼您應該始終保留原始版本並從中產生每個壓縮版本,而不是壓縮已經壓縮一次的檔案。

我怎麼知道我的圖像是否太大?

在您的頁面上執行 Google Lighthouse 或 PageSpeed Insights;都標記超大圖像並建議更好的尺寸。快速經驗法則:如果任何單一圖像超過 200 KB,則為 '值得優化,英雄圖像尤其應該放在它下面,因為它們驅動最大的內容繪畫。透過調整大小轉換壓縮工作流程並重新審核來向違法者提供資訊。

如何將影像壓縮到特定檔案大小(例如 200 KB 或 1 MB)?

首先調整顯示尺寸,然後降低質量,直到您清除目標:從 80% 開始,如果您'仍然結束,嘗試 70%,然後嘗試 60%。這圖像壓縮工具會在您移動滑桿時顯示輸出大小,因此您可以觀看它跨越閾值,而不是猜測和重新匯出。將格式切換到 WebP 通常會在相同的品質設定下為您再購買 25% 至 35%,這本身通常就足夠了。

壓縮影像會降低其解析度或尺寸嗎?

不 - 壓縮和調整大小是單獨的操作。壓縮一張 3000×2000 張照片後,它就會變成 3000×2000;它只是使用更少的位元組來儲存這些像素,但會犧牲一些精細的細節。如果您想要更少的像素,則 's 調整大小,it's 通常可以節省最多重量的變更。按照這個順序,同時執行這兩個操作可以將 6 MB 相機檔案轉換為 90 KB 網路影像。

Frequently Asked Questions

For true, pixel-perfect lossless compression, use PNG or lossless WebP. For "visually lossless" — no difference you can see — use JPEG or WebP at 80–90% quality. The Image Compress tool lets you set the quality and compare the original against the compressed version before you download, so you can find the exact point where size drops but the image still looks untouched.