Can this tool convert my image to AVIF?

No. The converter outputs PNG, JPEG, and WebP only, because it uses the browser's canvas encoder and no browser can encode AVIF from a canvas. Your browser can decode AVIF, so you can convert an AVIF file to WebP or PNG here — just not the other direction. For AVIF output, use a command-line encoder like avifenc or your framework's image pipeline.

Why did my transparent PNG get a black background after converting to JPEG?

Because JPEG has no alpha channel, and the HTML specification says a canvas serializing to a format without alpha support must composite the image onto a solid black background. It's spec-mandated behavior, not a bug, and it's the same in every browser. Convert to PNG or WebP instead if you need transparency preserved.

Does converting an image remove its EXIF data?

Yes — all of it, including GPS coordinates, camera settings, and capture date. The tool draws your image to a canvas and re-encodes the pixels, and a canvas carries no metadata. That's useful if you're stripping location data before posting a photo, and a problem if you need the metadata, so keep an unconverted original either way.

Can I convert an animated GIF to an animated WebP?

Not with this tool. It loads your image into an element and captures a single frame to the canvas, so an animated GIF comes out as one still image. Animated WebP requires a real multi-frame encoder — use gif2webp from Google's WebP tools, or convert the animation to MP4, which will be dramatically smaller than either.

Will converting JPEG to PNG improve the quality?

No. PNG is lossless, so it preserves exactly what it's given — including the compression artifacts already baked into the JPEG's pixels. You end up with an identical-looking image in a much larger file. Lost data is lost; no format change brings it back.

Is there a file size limit?

No hard limit is enforced. The practical ceiling is your device's memory, since the whole image is decoded into a canvas bitmap at roughly width × height × 4 bytes — a 8000×6000 photo needs about 192 MB of RAM as raw pixels before encoding even starts. Desktop browsers handle typical camera output without complaint; older phones may struggle with very large files.

What is the difference between PNG and JPEG?

JPEG is lossy and built for photographs: it discards fine detail to reach small files, and it has no transparency. PNG is lossless and built for graphics, screenshots, and logos: it keeps every pixel exactly and supports a transparent background, at the cost of larger files for photos. You can convert between them here, but remember a transparent PNG saved as JPEG gets a solid background, since JPEG has no alpha channel.

How do I convert an image to WebP for free?

Load your PNG or JPEG, choose WebP as the output format, set the quality if you want a smaller file, and download — it is free and runs entirely in your browser. WebP is usually the conversion worth making for the web, since it is smaller than both JPEG and PNG while still supporting transparency and is read by every current browser.

Does my image get uploaded to a server?

No. The file is read locally with an object URL, decoded by your browser, re-encoded by your browser's canvas, and saved by your browser. You can verify this yourself: open DevTools, go to the Network tab, and convert an image — you'll see no upload. Once the page has loaded, the conversion works with your Wi-Fi off.

PNG 到 JPG 到 WebP:瀏覽器轉換器實際上可以做什麼

我將轉換後的徽標運送給客戶'網站曾經,它回來時有一個黑色矩形,其中曾經是透明背景。我沒有考慮過,就將 PNG 轉換為 JPEG。奇怪的是我 預期的 白色 - 我讀過的每一篇文章都說透明和引用;變成白色。&引用;它變成了黑色,我花了二十分鐘假設我的程式碼被破解,然後我閱讀了 HTML 規範並發現瀏覽器正在完全按照指示進行操作。

這就是本指南的誠實主題。這圖像格式轉換器 toolz。dev 是瀏覽器上的薄包裝器'擁有自己的畫布編碼器。這賦予了它真正的優勢 - 沒有上傳,它'即時,載入後離線工作 - 以及大多數 &quot 的真實限制;將任何圖像轉換為任何格式和引用;頁面不允許。我建立了這個,所以 I'會告訴你兩半。

TL;DR: 的圖像格式轉換器獲取瀏覽器可以開啟的任何圖像並將其重新編碼為 PNG、JPEG 或網路P- 這三個,而且只有這三個。沒有 AVIF、GIF 或 SVG 輸出,因為該工具使用瀏覽器'畫布編碼器,這就是畫布支援的內容。選擇一個目標,拖曳品質滑桿(僅限 JPEG 和 WebP - PNG 忽略它),下載。轉換前需要了解的兩件事: 當您瞄準 JPEG 時,透明膠片會合成到黑色,根據規格,和 EXIF 元資料被剝離 每次轉換時,因為畫布重新編碼僅攜帶像素。要縮小文件,請將其與配對影像壓縮器和圖像調整大小工具。

該轉換器實際上支援什麼?

Let's 首先獲得正確的範圍,因為這是大多數格式指南過度銷售的地方。

輸入: 文件選擇器接受 image/*,並且該檔案被載入到普通檔案中 <img> 元素。因此,如果您的瀏覽器可以顯示它,該工具就可以讀取它 - PNG、JPEG、WebP、GIF、BMP、AVIF,以及大多數現代瀏覽器中的 SVG。

輸出: PNG、JPEG、WebP。三個按鈕。那'是列表。

原因不是懶惰,它's平台。該工具將您的圖像繪製到 <canvas> 並打電話 canvas.toBlob(callback, type, quality)。 HTML 生活標準要求每個瀏覽器都支援 image/png 對於該呼叫,其他格式為可選;在實踐中, image/jpeg 和 image/webp 各地都得到支持 image/avif 編碼不是。沒有瀏覽器 API 可以從畫布編寫 AVIF 或 GIF。為您提供 AVIF 輸出的網站要么附帶 WebAssembly 編碼器(數百 KB 的下載量),要么更常見的是將圖像上傳到伺服器。該工具的作用也不是。

這是誠實的比較表,工具優先:

你想要	這個工具	為什麼
PNG → JPEG	是的	畫布編碼 `image/jpeg`
PNG → WebP	是的	畫布編碼 `image/webp`
JPEG → WebP	是的	這裡最有用的轉換
WebP → PNG/JPEG	是的	對於仍然可以't讀取WebP的工具
AVIF → WebP	是的(阿維夫在僅)	瀏覽器解碼AVIF; can't 對其進行編碼
任何事物 → AVIF	不	不存在 canvas AVIF 編碼器
動畫 GIF → 動畫 WebP	不	一個 `<img>` 給畫布一幀
任何事物 → SVG	不	SVG 是向量;這是一個光柵管道
200 個文件批次	不	一次一個文件

如果您需要 AVIF 或動畫 WebP,請使用 squoosh 本地, cwebp/avifenc 從命令列或您的建置管道'的影像步驟。我寧願送你去有用的地方,也不願假裝。

為什麼 JPEG 將我的透明背景變成黑色?

因為規格是這麼說的,而且我是在客戶電子郵件之後才知道的。

JPEG 沒有 alpha 通道。當您要求畫布序列化為不支援 alpha 的格式時,HTML Living Standard 是明確的:點陣圖必須合成到 a 上 純黑色背景 在編碼之前。不是白色的。黑色的。 Chrome、Firefox 和 Safari 都遵循這一點,這就是為什麼行為是一致的,也是為什麼它一次讓每個人都感到驚訝。

所以: 將透明的 PNG 標誌轉換為 JPEG 將為您帶來一個黑盒子。 每次。那'工具中沒有錯誤,它'平台是一致的,並且不拖曳質量滑桿即可修復它。

代替該怎麼辦:

保持透明度? 目標 巴布亞紐幾內亞 或者 網路P. 兩者都攜帶阿爾法。 WebP 通常是兩者中較小的一個。
具體需要JPEG嗎? 首先將影像平鋪到編輯器中實際想要的背景顏色上然後轉換。
只轉換照片? 照片沒有透明度,所以永遠不會出現。轉換掉。

這是人們用轉換器損壞影像的最常見方式,它'值得內化: alpha 是格式的屬性,而不是檔案的屬性。 選擇 JPEG 就是選擇丟棄 alpha 通道。

畫布重新編碼中還遺失了什麼?

畫布上保存著像素。只是像素。當瀏覽器重新編碼時,原始檔案中的其他所有內容都會被丟棄,這會吸引人們:

EXIF 不見了。 相機品牌和型號、鏡頭、曝光、拍攝日期、版權欄位等 GPS 座標 一切都消失了。這是偶然贏得隱私的機會 - 在發布之前轉換手機照片會剝離其拍攝位置 - 但如果您'是檔案管理員或您需要版權欄位才能生存,請勿透過任何基於畫布的轉換器運行原件。轉換副本。

顏色設定檔變平。 標有寬色域設定檔(如 Display P3 或 Adobe RGB)的影像會被繪製到畫布上,實際上,畫布將其視為 sRGB。對於網頁圖像,這無論如何都是您想要的。對於印刷作品,它是't。

動畫崩潰到一幀。 一個 <img> 無論顯示什麼幀,元素都會將畫布交給畫布。放入 12 秒動畫 GIF,然後您'仍會得到一個。該工具不會警告您這一點,我認為這是一個真正的粗糙邊緣而不是一個功能。

其他所有內容都從解碼的像素重新編碼。 這使我們得出最重要的一條規則。

什麼是世代損失?如何避免?

每次儲存有損格式時,編碼器都會丟棄資料。丟棄資料、解碼資料、丟棄更多資料以及損壞化合物。這是生成損失,它'這就是您的 meme 範本看起來像傳真的原因。

規則很短: 始終從您擁有的最好的原件進行轉換,而不是從轉換後的副本進行轉換。

具體來說,JPEG → WebP → JPEG 比原始 JPEG 差兩倍。第一個編碼'工件被第二個編碼視為真實影像細節,第二個編碼忠實地花費位元來保存它們。如果您有 RAW 檔案或 PNG 匯出,請從那裡開始。

There'是一個讓人心煩意亂的推論: 將 JPEG 轉換為 PNG 並不能恢復品質。 PNG 是無損的,因此它將完美地保存您的影像 - 包括已經烘烤到像素中的每個壓縮工件。您在檔案中收到相同的損壞影像三到四倍大。 PNG-from-JPEG 值得作為中間步驟,當您'即將進行多輪編輯並希望避免每次保存時重新壓縮。

我實際上應該選擇哪種格式?

跳過格式分類法;這裡'按照我實際做出的順序做出決定。

這是一張照片嗎? WebP 80 com85。如果您的管道中有某些內容可以'在 80 coms85 讀取 WebP、JPEG。

它有透明度嗎? 網路P。如果您需要最大程度的兼容性,請使用 PNG。

它是螢幕截圖、使用者介面模型、圖表或任何帶有文字和平面顏色的內容嗎? PNG,或 WebP。 JPEG'離散餘弦變換將清晰的邊緣塗抹成字母周圍可見的蚊子噪音- 它是在20 世紀80 年代末為連續色調照片設計的(該格式標準化為ITU-T T。81/ISO/IEC 10918-1),而文字正是它處理最差的內容。

它是您控制的來源的標誌還是圖示? 兩者都不 - 使用 SVG,然後 don't 將其通過光柵轉換器。

對於背後的規格:PNG 是 ISO/IEC 15948,WebP 最終發佈為 RFC 9649 2024 年,也就是 Google 發貨 14 年後。關於尺寸,Google'自己的比較研究表明,WebP 有損比同等 SSIM 下的 JPEG 小約 25% 至 34%,而 WebP 無損比 PNG 小約 26%。這些是供應商'供應商上的號碼'語料庫 - 將它們視為強而有力的提示,而不是對您的特定圖像的承諾。 I'我很樂意引用它們,因為它們'多年來,我在真實螢幕截圖和照片上的結果與我的結果非常匹配。您的可能有所不同,這就是為什麼該工具會在轉換之前向您顯示來源大小。

如何在 Toolz。dev 上轉換影像?

步驟1:打開轉換器

去圖像格式轉換器. 沒有什麼可安裝的,沒有帳戶。

第 2 步:上傳您的圖像

點擊上傳區域並選擇一個文件。它透過物件 URL 載入到您的瀏覽器中 - 該檔案永遠不會發送到任何地方。你'將看到檔案名稱及其大小。

第三步:檢查格式讀數

該工具顯示 當前 → 目標. & 引用;當前&引用;是從檔案中讀取的's MIME 類型,所以 a .jpg 文件報告為 JPEG. 當有人重新命名檔案時,進行有用的理智檢查's 副檔名,但沒有實際轉換它,這種情況比您'd 想的還要多。

第四步:選擇你的目標

PNG、JPEG 或 WebP。

第 5 步:設定品質 - 如果適用

品質滑桿(1 個 EX100,預設為 90) 僅出現在 JPEG 和 WebP 中. That's 故意:PNG 是無損的 canvas.toBlob 完全忽略了品質論證 image/png,因此顯示一個什麼都不做的滑桿將是一個謊言。

對於在哪裡設定它:90 是預設值,對於大多數內容來說幾乎與原始內容沒有什麼區別。 80 fort85 是我實際工作的地方 - 意義更小,仍然乾淨。低於 60 you'將在照片以及任何帶有文字的 you&#39 上看到它;會更快看到它。

第 6 步:轉換並下載

擊 轉換&放大器;下載。編碼發生在您的電腦上,檔案儲存為 converted_<original-name>.<ext>. 尺寸被精確地保留 - 轉換器傳遞您的圖像'自己的寬度和高度,因此此步驟不會更改編碼,僅此而已。

轉換或壓縮 - 我需要哪一種?

當人們想要一個較小的文件時,他們會聯繫轉換器,通常是 ' 是錯誤的工具。三種不同的工作,三種不同的工具:

目標	工具	什麼變化
更改編碼	格式轉換器	格式、品質
格式相同,檔案較小	影像壓縮器	僅限品質
更少的像素	圖像調整大小	尺寸

最大的勝利幾乎總是一個人跳過。如果你'將 4000×3000 張照片放入 1200px 寬的佈局中, 調整每種格式選擇的節拍大小- 你'無論如何,都會丟棄瀏覽器要縮小和丟棄的 90% 像素。先調整大小,然後轉換。按照這個順序執行此操作通常需要 200 KB 以下的 4 MB PNG,並且無法接近全尺寸原件的巧妙格式選擇。

還有一個值得養成的習慣:保留你的原件。存檔無損母版,產生有損衍生品進行分發。當 AVIF-everywhere 最終到達時,或之後的下一個格式,you'將從乾淨的來源重新匯出,而不是升級遺憾。

常見問題

哪種圖像格式最適合網站?

WebP,適用於大多數內容。它'對於照片,它比JPEG 小,對於圖形,它比PNG 小,它支援透明度,並且每個當前瀏覽器都讀取它- Safari 是最後一個堅持者,並在版本14 中添加了支援。AVIF 壓縮效果更好,但您可以't 在瀏覽器畫布;您需要建置步驟或桌面編碼器。

該工具可以將我的圖像轉換為 AVIF 嗎?

否。轉換器僅輸出 PNG、JPEG 和 WebP,因為它使用瀏覽器's canvas 編碼器,沒有瀏覽器可以從 canvas 編碼 AVIF。你的瀏覽器可以解碼 AVIF,因此您可以轉換 AVIF 檔案到 WebP 或 PNG 在這裡 - 只是不是另一個方向。對於 AVIF 輸出,請使用命令列編碼器,例如 avifenc 或您的框架's 影像管道。

為什麼我的透明 PNG 在轉換為 JPEG 後會獲得黑色背景?

因為 JPEG 沒有 alpha 通道,而 HTML 規範規定,序列化為不支援 alpha 的格式的畫布必須將影像合成純黑色背景。它'規範規定的行為,而不是錯誤,並且 '在每個瀏覽器中都是相同的。如果您需要保留透明度,請轉換為 PNG 或 WebP。

轉換影像會刪除其 EXIF 資料嗎?

是的 - 所有內容,包括 GPS 座標、相機設定和拍攝日期。該工具將您的圖像繪製到畫布上並重新編碼像素,畫布不攜帶元資料。 That'如果您'在發布照片之前刪除位置數據,並且如果您需要元數據,則會出現問題,因此無論哪種方式都要保留未轉換的原始數據。

我可以將動畫 GIF 轉換為動畫 WebP 嗎?

不是用這個工具。它將您的圖像載入到一個中 <img> 元素並將單幀捕獲到畫布上,因此動畫 GIF 會以靜態影像的形式出現。動畫 WebP 需要真正的多幀編碼器 - 使用 gif2webp 來自 Google's WebP 工具,或將動畫轉換為 MP4,MP4 將比任一工具小得多。

將 JPEG 轉換為 PNG 會提高品質嗎?

No。 PNG 是無損的,因此它準確地保留了它'給出的 - 包括已經烘烤到 JPEG 和#39 中的壓縮偽影;s 像素。您最終會在更大的檔案中獲得外觀相同的影像。遺失的資料遺失;格式變更不會將其恢復。

有檔案大小限制嗎？

沒有強制執行硬限制。實用的上限是您的裝置' s 內存,因為整個圖像被解碼為大約寬度 × 高度 × 4 位元組的畫布位圖 - 一張 8000×6000 的照片在編碼開始之前需要大約 192 MB RAM 作為原始像素。桌面瀏覽器可以毫無怨言地處理典型的相機輸出;較舊的手機可能難以處理非常大的檔案。

PNG 和 JPEG 有什麼不同?

JPEG 是有損的,專為照片而建置:它丟棄精細的細節以到達小文件,並且沒有透明度。 PNG 是無損的,專為圖形、螢幕截圖和徽標而構建:它準確地保留每個像素並支援透明背景,但代價是照片檔案更大。您可以在此處在它們之間進行轉換,但請記住,當 JPEG 獲得可靠背景時,會儲存一個透明的 PNG,因為 JPEG 沒有 alpha 通道。

如何免費將圖像轉換為 WebP?

載入您的 PNG 或 JPEG,選擇 WebP 作為輸出格式,如果您想要較小的文件,請設定質量,然後下載 - 它是免費的,並且完全在您的瀏覽器中運行。 WebP 通常是值得為 Web 進行的轉換,因為它比 JPEG 和 PNG 都小,同時仍然支援透明度,並且每個當前瀏覽器都可以讀取。

我的圖像會上傳到伺服器嗎?

不。該文件在本地讀取時帶有目標 URL,由瀏覽器解碼,由瀏覽器重新編碼's 畫布,並由瀏覽器儲存。您可以自己驗證:開啟 DevTools,前往網路選項卡,然後轉換圖像 - you'不會看到上傳。頁面載入後,轉換工作將關閉您的 Wi-Fi。

簡短版本

瀏覽器畫布是三種格式的良好、誠實的圖像轉換器,而其他格式則不然。在 PNG、JPEG 和 WebP it&#39 內;即時、私密和免費,它涵蓋了對網路真正重要的轉換:將您的照片傳輸到 WebP。在這三者之外,它可以't help,I'寧願這麼說,也不願讓你在客戶端和#39 上用黑色矩形找出答案;主頁。

在轉換任何內容之前,請詢問是否需要透明度(然後不需要 JPEG)、是否需要元資料(然後保留原始資料)以及影像是否只是像素太多(然後) 調整大小第一)。正確理解這三個,格式選擇是簡單的部分。

的圖像格式轉換器在這裡。對於圖像工作流程的其餘部分,那裡's 影像壓縮器, 圖像調整大小工具,以及 - 對於平面背景切口 - 背景刪除器. 更廣闊的視野在圖像工具指南和影像壓縮指南.

Frequently Asked Questions

WebP, for most content. It's smaller than JPEG for photos and smaller than PNG for graphics, it supports transparency, and every current browser reads it — Safari was the last holdout and added support in version 14. AVIF compresses better still, but you can't produce it in a browser canvas; you need a build step or a desktop encoder.