決定圖片規格

真正要定的只有寬度

商品頁圖片裡真正需要決定的值只有寬度。高度由內容決定，檔案大小則是兩者的結果。可是很多人把順序弄反，先糾結縱向多長，做完才發現寬度不對，只好全部重畫。

定寬度只有一個標準：要上傳的地方把圖片顯示成多少像素寬。做得比它大，瀏覽器會縮小顯示，白白浪費檔案大小；做得比它小，就會被拉伸，看起來發糊。

makeinfo 的預設畫布寬度是 860px。縱向很長的商品頁圖片普遍會用到這個寬度，拿來當起點很合適。

這個數字不是從桌機螢幕尺寸來的。商品頁大多在手機上看，購物 App 會把圖片拉伸到螢幕寬度。860px 是在拉伸後仍不發糊、同時檔案又不至於過大的折衷點。

不過這終究只是起點。要上傳的地方另有規定寬度時，以它的值為準 — 各平台不同，同一平台也會改規則。

想更清晰的話，不要加大作業寬度，而要提高匯出倍率。編輯仍按 860px 進行，只把成品檔案匯成 2 倍（1720px）。把作業寬度直接設成 1720px，字級和留白的手感全都要重新適應；只調倍率的話，螢幕上看到的就是原樣，只是解析度翻倍。

「商品頁要做 72dpi 還是 300dpi」是常見的問題，但對要放到網頁上的圖片來說，dpi 什麼都不會改變。

dpi 只是檔案裡記錄的一條備註，寫著這張圖印在紙上時每英吋打多少個點。它只是個數字，既不增加也不減少像素。瀏覽器和購物 App 不讀這個值，只看像素數。1000×1000 的圖片，無論存成 72dpi 還是 300dpi，在螢幕上完全一樣。

所以網頁用圖不必在意 dpi，要看的是橫向像素數。反過來印刷品的 dpi 決定實際輸出尺寸，那時就必須認真對待 — 那是另一回事。

高度由內容決定。不過一直往長了做，會撞上三件事。

切分時最重要的是切在哪裡。切在段落中間或商品照片正中，圖片之間那道細縫就會像刮痕一樣顯眼。makeinfo 的分割 PNG 會先找區塊之間的空白，在那裡下刀。自動定的位置不滿意時，可以自己移動切割線。挑選位置的標準在切分很長的商品頁裡詳細說明。

撞上容量限制時，先削寬度是最後的手段。在那之前先看這些。

先看這些	說明
切分	如果限制是按單張算，切分就能直接解決，而且完全不損畫質。
匯出倍率	如果在用 2 倍匯出，試試改成 1 倍。容量大約變成四分之一。
檔案格式	照片多的話 JPG 比 PNG 小得多。反過來，單色底加大量文字的圖，PNG 更小而且文字更銳利。
放進去的照片大小	把 4000px 的原圖放進 300px 的位置，那份重量會留在成品裡。makeinfo 在新增時會自動縮小，但用其他工具做的素材需要自己確認。

把這些都試過還是不夠，才輪到削寬度，因為寬度直接影響清晰度。

下面是普遍通用的數值。不過各平台會調整規定，實際上傳前請務必確認該平台的公告或上傳頁面的說明。這張表只當作開工時的起點來用。

類別	常用數值
商品頁內文	寬 860px。平台另有規定寬度時用它的值。
主圖（縮圖）	正方形，常用 1000×1000px 左右。在列表裡顯示得很小，所以要放文字就得放大。
群眾募資內文	內文寬度有時比商品頁更寬。先在編輯頁面確認實際顯示的寬度。
社群正方形	1080×1080px
社群直式	1080×1350px（4:5）。在動態牆上佔的縱向空間最多。
社群橫式	1200×675px（16:9）

怎麼確認 — 商品上架頁面的圖片附件欄裡，通常用小字寫著建議尺寸和容量限制。那裡比公告頁更常保持最新。

把商品頁原樣發到社群，多半會被裁掉。動態牆會把縱向長圖摺起來，而人們不會去展開。

宣傳圖必須一張定勝負。留下商品照片、名稱、價格、販售時間，其餘刪掉。把商品頁用的顏色和字體照搬過來，兩張圖就會看起來像一套，順著連結進來的人立刻認得出是同一件商品。

在 makeinfo 裡把畫布寬度改成 1080px，只留需要的區塊就行。複製商品頁的專案再做減法，比從頭重做更不容易讓顏色和字體走樣。