
內容摘要
生成的圖片一定是最佳解像度、也是最大重量。API 呼叫只是容易的一半;真正讓圖片能上線的,是不做第二次破壞性編碼的縮放與轉檔。
FLUX 3 Image 是透過代管 API 提供,而不是讓你在筆電上跑,因此真正有價值的工作發生在請求回來之後。模型交回一張固定高解像度的圖片,完全不在乎你的頁面預算,所以快速網站與慢速網站之間的差距,就在你包在呼叫外面的那條流程。
本文涵蓋多數圖像 API 使用的請求與回應形式,接著說明把結果變成能上線檔案的縮放與編碼步驟。
01代管圖像 API 對流程有什麼影響
本機模型回傳張量或磁碟檔案;代管服務則在 JSON 裡回傳 URL 或 base64 內容,兩種選擇會把成本推到不同位置。URL 讓 API 回應很小,但通常幾小時內就過期,你終究得下載並自行重新託管。base64 讓一切都在同一個回應裡,但傳輸量會膨脹約 33%,也讓請求記錄變得極大。
請對照最新官方文件確認欄位名稱
下面的請求沿用多數圖像 API 的形式——以 JSON 夾帶提示詞與尺寸,並用 bearer token 驗證。Black Forest Labs 公布 FLUX 3 的確切端點與參數名稱,而那些會變動;請把這裡當成模板,而不是凍結的契約。
02向 API 請求一張圖片
送出帶 JSON 內容與授權標頭的 POST。模型與端點名稱各家不同,請把它們放進設定,不要在十個地方硬編碼。
curl -X POST "$IMAGE_API_URL" \
-H "Authorization: Bearer $IMAGE_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"prompt": "isometric illustration of a filing cabinet, soft indigo palette",
"width": 1024,
"height": 1024,
"format": "png"
}'
請尊重你真正需要的長寬比。生成正方形再裁成橫幅,等於丟掉你付費換來的像素;要求超寬畫布,則會把資源浪費在你之後會裁掉的區域。
03處理回應:URL 或 base64
兩種回應形式需要不同的程式路徑。URL 形式是一小段 JSON,你要再抓一次;base64 形式是一大串字串,你要解碼後寫入磁碟。
{
"id": "req_9f3c1a",
"status": "ready",
"image": {
"url": "https://cdn.example.invalid/generations/req_9f3c1a.png",
"expires_at": "2026-10-04T12:00:00Z"
},
"seed": 812347
}
const res = await fetch(process.env.IMAGE_API_URL, {
method: 'POST',
headers: {
Authorization: `Bearer ${process.env.IMAGE_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({ prompt, width: 1024, height: 1024, format: 'png' }),
})
const data = await res.json()
const bytes = data.image.url
? Buffer.from(await (await fetch(data.image.url)).arrayBuffer())
: Buffer.from(data.image.b64, 'base64')
await fs.writeFile(`out/${data.id}.png`, bytes)
請把 seed 與檔案一起保存。那是日後重現或微調結果的唯一方法,而從零重新生成幾乎不可能一模一樣。
04先縮放,再壓縮
順序很重要。若先壓縮再縮放,縮放就必須自行生出或丟掉已被破壞性編碼損傷的像素。請先縮到顯示尺寸,再套用一次破壞性編碼。
| 顯示目標 | 儲存尺寸 | 說明 |
|---|---|---|
| 600 px 卡片 | 1200 px | 涵蓋 2× 屏幕 |
| 1200 px 主視覺 | 2000 px | 上限約 2000 px,再大也看不出差別 |
| 滿版背景 | 2560 px | 只有版面真的橫跨視窗時才需要 |
對一般博客或商品卡片來說,1024 像素的 API 結果已經比你要的大。縮到約顯示寬度的兩倍就停手。
05選好格式,只編碼一次
生成的圖片通常是 PNG,無損所以偏重。攝影類輸出請轉成 WebP;它支援透明度,所以切換格式不會失去 alpha。只有在你能提供備援時才選 AVIF,因為較舊裝置的編碼器支援與解碼成本仍有差異。
# 縮放後,從原檔做一次破壞性編碼。
cwebp -q 82 -m 6 -resize 1200 0 source.png -o output.webp
質素要目視調整,不要只看數字。質素設定不是檔案大小百分比:同一個數值可能讓某張圖減半,卻讓另一張幾乎沒變,取決於模型產生了多少高頻細節。
不要為了縮小檔案而重新編碼已經有損的圖片
把 JPEG 再送進編碼器一次,在相同質素下只會丟掉更多細節。請永遠保留原始 PNG,調整參數後從母檔重新編碼。
06接進建置流程或 CMS
流程要在寫入時跑一次,而不是每次請求都跑。生成圖片後,把原檔寫進物件儲存,再產生兩三種固定寬度的衍生檔,依視窗寬度提供對應版本。
多數網站穩定的組合是 400、800、1600 像素寬,透過 srcset 提供。請把 seed、提示詞與模型名稱跟素材一起存進資料庫,方便日後稽核圖片來源。若頁面用滿版寬度渲染生成圖卻沒有 width 與 height 屬性,你還會在重量問題之外多一個版面位移問題。
07常見錯誤與修正
| 現象 | 原因 | 解法 |
|---|---|---|
| 請求回傳 401 | 缺少或錯誤的 bearer token | 確認標頭真的有送出,而不只是存在設定裡 |
| 回應 JSON 超大 | base64 圖片直接內嵌 | 改要求 URL,或在記錄前先解碼寫入磁碟 |
| URL 隔天就失效 | 簽章連結過期 | 立刻下載並重新託管 |
| 輸出看起來模糊 | 放大超過生成解像度 | 直接生成目標尺寸,不要事後放大 |
| 透明區域變黑 | 把透明 PNG 轉成 JPEG | 含 alpha 的圖片請維持 WebP 或 PNG |
簡單原則:把 API 輸出當成母素材,永遠不要當成要直接提供的檔案。縮放一次、編碼一次,並保留未動過的原始檔,這樣你改變主意時,不必再向模型要一次同樣的圖。
把 API 輸出丟進來,直接在瀏覽器縮放並轉成 WebP,不上傳伺服器。
圖片壓縮工具常見問題
為什麼 API 回傳的圖片這麼大?
圖像模型會回傳固定的高解像度,長邊常達 1024 像素以上,而且沒有為網頁優化。API 並不知道你的頁面預算。
我該要求 URL 還是 base64 回應?
URL 較小、較好緩存,但會過期且多一次請求。base64 自帶內容,但會讓載荷膨脹約三分之一,也讓 JSON 記錄變得肥大到難以閱讀。
PNG 轉 WebP 會失去透明度嗎?
不會。WebP 支援 alpha 通道,透明 PNG 可以乾淨轉換。只有在圖片沒有透明且屬於攝影內容時,才適合轉成 JPEG。
為什麼每次重新壓縮,畫質都更差?
每一次破壞性編碼都會丟掉細節,而下一次編碼救不回來。請從你手上最高質素的來源壓縮一次,不要串接多次破壞性步驟。
網站該儲存多大的解像度?
存你實際會顯示的最大尺寸,再產生較小變體。為了一張 600 像素的卡片而存放 2048 像素母檔,每次請求都在浪費位元組。
相關文章
- 如何壓縮圖片又不犧牲畫質
質素設定、縮放順序,以及重複編碼的陷阱。
- 做出每次都掃得過的 QR 碼
另一個由最後 5% 大小決定成敗的格式。
相關工具
- 圖片壓縮工具
在瀏覽器內縮放與壓縮。
- PNG 轉 WebP
把生成的 PNG 轉成網頁格式。
- JPG 轉 WebP
把 JPEG 輸出重新編碼成更小的格式。
- WebP 轉 JPG
下游工具只吃 JPEG 時轉回來。
- PNG 轉 JPG
攝影類輸出可去掉 alpha 通道。