跳至內容
DevTools / 圖片轉換與壓縮

圖片轉換與壓縮

Image weight is usually the single largest contributor to page load time, and the difference between a photograph exported at quality 90 and the same photograph exported at quality 75 is often invisible to the eye and several hundred kilobytes on the wire. This converter runs a batch of images through your browser's own codecs, resizes and rotates them, converts between JPEG, PNG, WebP and AVIF, and reports the before and after size for each file so the effect of a setting is measurable rather than guessed.

完全在瀏覽器本機執行——不會上傳任何內容。

或將檔案拖曳到此處
Files are decoded, resized and re-encoded entirely in this tab.
Drop an image above to begin. PNG keeps transparency, WebP usually gives the smallest file, and AVIF is smallest of all where the browser can encode it.

運作原理

The formats divide by what they are good at. JPEG is a lossy format designed for photographs: it discards high-frequency detail that the eye is poor at perceiving, achieving large size reductions at the cost of artefacts around sharp edges and text. PNG is lossless and supports an alpha channel, which makes it right for screenshots, logos, diagrams and anything with sharp edges or transparency, and wrong for photographs, where it produces files several times larger than JPEG for no visible benefit. Choosing per image rather than globally is the single biggest available saving.

WebP and AVIF are the modern options and are supported by every current browser. WebP typically beats JPEG by 25 to 35 percent at equivalent visual quality and supports both lossy and lossless modes with alpha, so it replaces both older formats. AVIF compresses further still — often 20 percent below WebP — but encoding is slower and the format is newer, so a fallback is still worth considering for older clients. Both are feature-detected here rather than assumed, because a converter that fails silently on an unsupported format is worse than one that refuses.

Quality is a percentage passed to the encoder, but it is not a linear scale and the useful range is narrower than the number suggests. For JPEG the perceptually significant range is roughly 60 to 85: below 60 the artefacts become visible as blockiness around edges and banding in gradients, and above 85 the file grows steeply for a difference almost nobody can see. The right way to choose is to compare the output rather than to reason about the number, which is why the tool shows the original and converted sizes and lets you inspect the result at full size.

Resizing is the other large lever and it interacts with quality. Serving a 4000-pixel-wide photograph into a 400-pixel slot wastes most of the bytes, so constraining the longest edge to roughly twice the display width is usually right — twice, rather than exactly, to stay sharp on high-density screens. The fit modes determine what happens to the aspect ratio: contain preserves it inside the box, cover preserves it while filling the box and crops the overflow, exact stretches, and none leaves the dimensions alone. Rotation is applied as a metadata-free transform, and EXIF orientation is read so that a photograph taken on a phone in portrait is not silently sideways.

常見應用情境

  • Convert a folder of PNG screenshots to WebP to cut the weight of a documentation site.
  • Compress photographs before uploading them to a site with an upload size limit.
  • Resize images down to the dimensions a page actually displays them at.
  • Convert a JPEG with a transparent region to PNG or WebP so the transparency survives.
  • Rotate a batch of phone photographs according to their EXIF orientation before publishing.
  • Measure how much a quality setting actually saves before committing to it site-wide.

最後更新: 2026-10-14 — 正文以英文顯示，介面已完成翻譯。

常見問題解答

Which format should I use?

WebP for almost everything on the web today, since it handles both photographic and graphical content with alpha, and every current browser supports it. JPEG when the widest possible compatibility matters or when a downstream system cannot accept WebP. PNG for images that must remain bit-exact, such as those processed by a build step that compares checksums, and for the small icons where its lossless compression is genuinely efficient. AVIF when the last twenty percent of file size is worth slower encoding.

What quality setting should I choose?

For JPEG and lossy WebP, start at 80 and compare. Below about 60 the artefacts become visible around text and sharp edges; above 85 the file grows quickly for a difference that is usually imperceptible. The setting is not comparable between formats — a WebP at 80 does not look like a JPEG at 80 — so choose by looking at the output rather than by picking a number from a table. The size figures shown here let you see the cost of each step.

Are my images uploaded to a server?

No. The conversion uses the browser's own image decoding and encoding through the canvas API, so the files never leave your machine and no network request is made — which you can confirm in your browser's developer tools. This matters for images that are confidential, such as screenshots of internal systems, unreleased designs or documents containing personal data. It also means the tool works offline once the page has loaded.

Why did converting to PNG make the file larger?

Because PNG is lossless, so it stores every pixel exactly rather than approximating the image. For a photograph that means a file several times larger than the equivalent JPEG with no visible difference, since photographic content has no redundancy for lossless compression to exploit. PNG is the right choice for images with flat colours, sharp edges or transparency and the wrong one for photographs. Conversion between formats does not improve quality either way: a JPEG converted to PNG stays exactly as lossy as it was, it just weighs more.

相關工具