一個好的電子郵件簽名檔格式，應該是一個精簡的 4 到 6 行區塊，搭配易於掃讀的聯絡資訊和一張小尺寸的簽名圖片，總大小控制在 20 KB 內，並使用透明背景的 PNG，讓標誌在任何背景上都能乾淨呈現。這個格式的任務不是展示你做的一切；而是在三秒內讓讀者知道接下來該怎麼做。一個乾淨的格式只會包含一組電話號碼、一個電子郵件、一到兩個連結、一個職稱、一間公司名稱，以及一個可選的標誌或簽名圖片。橫幅、勵志語錄、法律免責聲明，以及一排三個社群媒體圖示，都會讓格式超過行動端用戶端會裁切的範圍、超過回覆視窗會折疊的範圍，並讓收件人停止閱讀。
這個格式也必須能夠在不同的郵件用戶端之間順利傳遞。在 Gmail 網頁版上看起來很精緻的簽名檔，到了 Outlook 桌面版可能會壞掉、在 Apple Mail 預覽中變成遺失的圖片，或是在 iOS 的 Gmail 回覆編輯器中被裁切。好的格式是為最差的用戶端而設計的，而不是為最好的那個，這代表每個聯絡資訊都要使用純文字、一張小圖片，以及極為簡單、任何郵件引擎都不會出錯的 HTML。
在電子郵件簽名檔格式中，「好」真正的意思
在電子郵件簽名檔的脈絡中，「好」是三件事同時運作所交會出來的結果。第一是可掃讀性：每一項資訊都應該在一眼之間就能讀取，理想情況是在伸手可及的手機螢幕上，讓最容易採取行動的項目（通常是電話號碼或網站）成為最方便點選的目標。第二是可攜性：同一個簽名檔必須在 Gmail 網頁版、Gmail 行動版、Outlook 桌面版、Outlook 網頁版、Apple Mail，以及你的收件人實際使用的其他十幾個郵件用戶端中，都能穩定地呈現。第三是載入速度：如果簽名圖片很肥大，或它所在的 HTML 表格巢狀了五層深，在網速較慢的收件人端就會看到破碎的版面或遺失的圖片。
能同時滿足這三點的格式是混合式簽名檔，也就是一小塊純文字的聯絡資訊，包在一個簡單的 HTML 表格中，搭配一張透明背景的 PNG 簽名圖片，錨定在文字區塊的上方（用於個人或創辦人的品牌）或旁邊（用於企業版面）。這是 Litmus、Yesware 和 HubSpot 等大多數專業範本所使用的格式，也是能夠在傳遞過程中不被任何主要郵件用戶端破壞的格式。
三種簽名圖片格式與各自的使用時機
在開始建構之前，先認識你可以在三種圖片格式中選擇的內容會很有幫助。每一種都有它的用途，而大多數人最常犯的錯就是把這些用途混為一談。
| 圖片格式 | 它是什麼 | 最適合用於 | 主要取捨 |
|---|---|---|---|
| 透明背景 PNG 簽名 | 沒有背景圖層的小尺寸 PNG，筆跡直接落在郵件畫布上 | 疊在淺色或深色收件匣、抬頭紙、彩色頁面或照片上的電子郵件簽名 | 某些較舊的用戶端可能會移除透明度並顯示淡淡的背景 |
| 白背景 PNG | 同一個簽名置於純白畫布上 | 已知顏色的列印頁面、掃描後寄出的工作流程、單色文件 | 硬邊的白框會在深色模式收件匣和彩色背景上顯得很突兀 |
| 純圖片簽名區塊 | 一個大型 PNG，整個簽名檔（姓名、職稱、聯絡資訊、連結）全部烘焙成一張圖 | 高度風格化的品牌簽名、設計 mockup | 當圖片被阻擋時無法閱讀，聯絡資訊無法以文字複製，不具無障礙可用性 |
對電子郵件而言，透明背景的 PNG 在整體上勝出。它讓簽名在視覺上有錨點，卻不會在深色模式收件匣上強加一個白框，也讓郵件的背景顏色能透出筆跡之後，並以無失真的 PNG 匯出，這樣在用戶端插入時縮放圖片，邊緣依然保持銳利。
使用 Signature Generator 建立乾淨的簽名圖片
簽名圖片本身需要小、透明且銳利。一張凌亂的簽名圖片——例如周圍帶有白框、解析度過低，或比例錯誤——是讓原本不錯的簽名格式看起來不專業的最快方式之一。若要獲得乾淨的圖片，請使用 Signature Generator，它會在你的瀏覽器中直接產生透明背景的 PNG，不會上傳任何內容。
- 開啟 Signature Generator 並選擇打字模式（Type mode），然後依照你希望簽名呈現的方式輸入你的完整姓名（例如，"Jane M. Donovan" 而非 "Jane Donovan"）。
- 從手寫體和草書選項中挑選一種手寫風格，選擇墨水顏色（在淺色收件匣上，黑色或深藍色讀起來最乾淨；只有在你控制背景時才切換為白色墨水），並調整大小，讓比例在想像中的 150 像素寬預覽上看起來恰到好處。
- 將背景保留為透明（transparent），這是預設值，這樣簽名才能乾淨地疊在郵件的背景顏色上，而不會在深色模式收件匣中冒出白框。
- 如果你想要手寫的感覺，請改用繪圖模式（Draw mode），用滑鼠、觸控板、觸控筆，或在觸控螢幕上用手指簽名；調整筆觸粗細，並使用清除按鈕重畫筆跡，直到看起來滿意為止。
- 點擊下載 PNG（Download PNG），將高品質、無失真的 PNG 儲存到你的裝置。圖片是在本地端產生，不會離開你的瀏覽器，因此你的簽名可以放心地用於機密文件。
輸出的是一個沒有背景的單一 PNG 檔。將它放入承載聯絡資訊文字的 HTML 表格中，它就成為簽名的視覺錨點。由於畫布的繪製、編碼和匯出全部都在你的裝置上使用標準的瀏覽器功能完成，不會上傳任何圖片、不需要帳號、關閉分頁後也不會保留任何資料。這讓你可以放心地在工作、個人和客戶郵件之間重複使用同一個 PNG，完全不必經過任何第三方伺服器。
讓格式真正能用的版面規則
一張好的簽名圖片，放進糟糕的版面中，依然會產生糟糕的簽名檔。圖片周圍的 HTML 必須遵守幾條大多數隨意範本都忽略的硬規則。
| 元素 | 目標 | 為何重要 |
|---|---|---|
| 簽名圖片寬度 | 150-200 px | 在視網膜螢幕和標準 DPI 下都能清楚閱讀，又不會喧賓奪主 |
| 簽名總高度 | 150 px 以下 | 能夠撐過 Gmail 和 Outlook 網頁版的回覆視窗折疊 |
| 圖片檔案大小 | 15 KB 以下 | 在 3G 和 4G 下能快速載入；預覽中不會出現破圖圖示 |
| 內文字型大小 | 13-14 px | 與預設的郵件內文相符，簽名才不會顯得過於突兀 |
| 免責聲明或法律文字 | 10-11 px，柔和灰色 | 存在但不搶眼；絕對不要與聯絡資訊同一個大小 |
| 總行數 | 4-6 行 | 在手機上一個畫面就能顯示，不需要捲動就能找到聯絡資訊 |
| 連結 | 最多 1-2 個（網站加一個社群媒體） | 超過兩個會分散注意力，並讓格式超出大小預算 |
| 電話號碼 | 1 個，以 tel: 連結格式化 | 在行動裝置上可點選；一個號碼勝過一疊沒人會撥的號碼 |
簽名 PNG 的透明度正是讓圖片在淺色和深色收件匣上都能運作、又不會冒出白框的關鍵。在深色模式的 Gmail 佈景主題中，使用透明背景產生的簽名會融入深色畫布；在淺色佈景主題中，則會落在白色背景上。只有在你要把簽名放在已知顏色的文件或列印頁面上時，才需要切換為白背景；因此對電子郵件來說，透明才是正確的選擇。
如果你正在為特定的郵件用戶端設計簽名檔，Outlook 手寫簽名指南涵蓋了 Outlook 在圖片插入和 DPI 縮放方面的怪癖，這些常常讓人卡關。
將簽名圖片加入 Gmail、Outlook 與 Apple Mail
每個主要用戶端處理簽名圖片的方式略有不同，但目標都一樣：一張透明背景的 PNG，搭配幾行純文字，置於一個小型的 HTML 表格中。
在 Gmail 網頁版中：前往「設定」（齒輪圖示），然後選擇「查看所有設定」，再依序進入「一般」與「簽名」。點擊建立新簽名（Create new），給它一個名稱，並在編輯器中點擊圖片圖示上傳你的 PNG。在圖片下方輸入你的聯絡資訊行（姓名、職稱、電話、網站）。使用格式化工具列將你的姓名設為粗體，並為你的網站加上連結。儲存變更，並將此簽名設為新郵件與回覆的預設簽名。
在 Outlook 桌面版（Windows）中：依序點選「檔案」、「選項」、「郵件」、「簽名」，再選擇「新增」。為簽命名稱。在編輯框中，將游標放在你想插入圖片的位置，點擊圖片圖示，並插入你下載的 PNG。在其下方輸入聯絡資訊行。在右側的下拉選單中，將此簽名設為新郵件與回覆的預設簽名。
在 Outlook 網頁版中：進入「設定」（齒輪），然後「檢視所有 Outlook 設定」，依序選擇「郵件」、「撰寫與回覆」。在電子郵件簽名（Email signature）下，從富文字來源（例如一封草稿郵件）貼上你的簽名，或點擊圖片圖示插入 PNG 並輸入聯絡資訊行。
在 Apple Mail 中：依序進入「Mail」、「設定」、「簽名」。點擊加號圖示以新增簽名。Apple Mail 要求你將 PNG 拖放至簽名窗格中，因為沒有上傳按鈕。圖片就定位後，在其下方輸入聯絡資訊行。
在大多數富文字編輯器中，HTML 表格結構是自動產生的，所以通常不需要自己撰寫 <table> 標籤。如果你需要完全自訂的版面（圖片在左、文字在右、一條彩色分隔線），請從範本貼上 HTML；像 Litmus 和 HubSpot 這類來源就發佈了能跨用戶端使用的免費範本。
Type Mode vs Draw Mode for an Email Signature Image
The two ways to build a signature inside the Signature Generator produce the same PNG output, but they fit slightly different email use cases. Type mode renders your typed name in a flowing handwritten style on the canvas; you can pick from several script and cursive font styles, choose any ink color, and adjust the size until the proportions feel right. Because the drawing is generated live, every change you make is reflected instantly in the preview, which makes Type mode the faster choice when you want a consistent, repeatable mark across every email account you own.
Draw mode lets you sign freehand with a mouse, trackpad, stylus, or finger on a touchscreen, exactly as you would on paper. Draw mode gives you an adjustable pen width and a Clear button so you can practice a stroke as many times as you like before you keep it. This is the right choice when you want a signature that looks closer to the way you actually sign documents by hand, and it is particularly useful if your typed name in a script font does not match the signature you already use on paperwork.
Both modes export the same high-quality lossless PNG, so the choice between them is aesthetic, not technical. The transparency, the file format, and the local-only processing are identical either way.
Format Mistakes That Make Email Signatures Look Bad
Even with the right tools and the right image, a signature can fail on the small details. The format mistakes that show up most often are the ones that look fine in the editor but break on the receiving end.
The first is a white-box signature image. If your PNG was exported with a white background instead of transparent, it shows as a hard-edged white rectangle on dark-mode inboxes. Re-export with a transparent background and re-upload.
The second is stacked icons. A row of six small social icons (LinkedIn, X, Instagram, GitHub, Facebook, YouTube) balloons the image width and pushes the format over the 200-pixel mark. Two icons is the maximum, usually LinkedIn plus one other relevant to your work.
The third is too many phone numbers. Office, mobile, fax, WhatsApp: pick the one you actually want called. A signature with three phone numbers communicates "I do not want to be reached" louder than no phone number at all.
The fourth is a motivational quote. "Dream big. Stay humble." under a signature is a 1990s convention that ages badly and adds a line the recipient has to scroll past. Drop it.
The fifth is missing alt text on the signature image. Email clients render image alt text when the image is blocked, and "Jane Donovan's signature" is more useful to a screen-reader user than a blank space.
The sixth is an oversized signature image. Anything wider than 250 px starts to dominate the message. The Signature Generator output is high-resolution, so resize down to 150-200 px in your editor before saving.
The seventh is treating the PNG as a legal signature. The file this tool produces is a visual signature image, not a legally binding digital signature and not a cryptographic signature. It does not embed a certificate, a private key, a tamper-evident hash, or an audit trail, and it does not verify who created it. A pasted signature picture can carry legal weight in many everyday situations depending on where you live, what you are signing, and whether all parties agree to it, but that comes from the surrounding agreement and applicable law, not from the image itself. If you need a certified e-signature with identity verification and a tamper-proof record, use a dedicated e-signature platform that issues a digital certificate.
A good signature format for email is a quiet, well-built thing: readers should not notice it as a design, only as a way to reach you. Keep it short, keep the image small and transparent, keep the text scannable, and the format does the work without anyone thinking about it.
If you're weighing options, Make a Signature Image for PDF Documents covers this in detail.