圖片能快速讓訪客理解您的品牌、產品、作品與空間。在 Kanorio,您只需要準備清楚的原始照片,系統會原封不動保存您的原檔,並在訪客瀏覽網站時自動依電腦或手機螢幕提供最合適的尺寸與格式。
網站中的各個圖片欄位(例如頁面主視覺、圖文並排、圖片畫廊、商品展示圖、頁首 Logo 與頁面分享圖)都具備統一的圖片選擇器,提供四種來源:
點選圖片欄位旁的「⋯ → 從媒體庫選擇」,即可挑選這個網站以前上傳過的任何圖片重複使用,不會複製新檔案、也不多佔儲存空間。詳細的挑選、整批上傳與「上傳新版本」功能,請見。
尚未準備好自己的照片時,可從「圖庫」(已有圖片時點「⋯ → 從圖庫選擇」)搜尋 Pexels 與 Pixabay 的免費商用照片。選中後系統會自動將照片轉存至您的網站媒體庫,搜尋技巧與授權範圍見下方「免費商用圖庫」。
點選「連結」(已有圖片時點「⋯ → 使用圖片連結」),可貼上 https:// 開頭的公開圖片網址:
Kanorio 採取「原檔不改寫」原則:您上傳什麼格式,系統就保存什麼格式的原始檔案,只在訪客瀏覽網頁時於邊緣節點即時轉換為載入最快的格式(如 WebP 或 AVIF)。
| 支援格式 | 適合情境與系統處理方式 |
|---|---|
| JPG / JPEG | 相片、場地照、人物照與色彩層次豐富的圖片。 |
| PNG | 需要透明背景的品牌標誌(Logo)、圖示或介面截圖。 |
| WebP | 兼顧畫質與檔案大小的現代網頁圖片格式。 |
| GIF(含動圖) | 動態示範圖或短動畫。上傳時不會跳出裁切框,公開網站會完整保留動態播放效果(媒體庫縮圖則以靜態預覽)。 |
| SVG(向量圖) | 品牌標誌、線條圖示與插畫。任何螢幕放大都不會模糊;系統上傳時會自動執行安全清洗(移除潛在腳本),保障網站安全。 |
| HEIC / HEIF | iPhone 與 iPad 預設拍攝格式。可直接原檔上傳並保存,訪客瀏覽時系統會自動轉為相容圖片顯示;僅少數特殊規格(如 10-bit HEIC)會自動在您的瀏覽器轉為高品質 JPG 後上傳。 |
過去在網站放圖片時,最常遇到的困擾是「上傳時裁了一次,放到網站或換成手機看時,人臉、商品或招牌卻被切掉;或是電腦版適合寬扁的橫幅,在手機上卻顯得太小,想重調還得重新上傳」。
在 Kanorio,會依版面比例顯示的圖片欄位(包含頁面主視覺、圖文並排、滿版大圖、圖文小卡畫廊、圖文小卡輪播、多連結卡片)都會保留整張原圖,不再要求您上傳時先把圖片裁小:
21:9 寬幅橫幅,手機版改用 4:5 或 1:1),也能點選「自訂」輸入您需要的寬高比。未單獨設定的裝置會自動沿用預設比例。Shift 加方向鍵可一次移動 10%)。Shift 加方向鍵縮放大小)。若框選的範圍太小、放大後可能影響畫質,視窗會自動提醒您。分享圖、商品圖與大頭照怎麼呈現?
- 所有上傳入口一律保存原圖:不論在頁面模組、SEO 社群分享圖、商品展示圖、作者或推薦頭像、品牌標誌或網站圖示(Favicon)上傳圖片,系統都不會要求您在上傳時把圖片裁小,讓同一張原圖可以在網站各處重複使用。
- 分享圖片與商品展示圖(預設自動判斷,可手動切換「完整顯示/填滿」):上傳後系統會自動判斷——白底、單色底或透明去背的產品圖預設採用「完整顯示」並自動補上相同底色,產品與文字不會被切到;一般實景照片則預設採用「填滿」。若想手動調整,點選圖片旁的「⋯ → 調整呈現方式」,即可在「完整顯示」(可自訂補邊顏色)與「填滿」(可拖框框選露出區域)之間切換。
- 大頭照(圓形頭像):保存整張原圖並套用 1:1 圓形遮罩,可隨時從「⋯ → 調整焦點」微調圓形內露出的位置。
- 卡片設為「完整顯示(不裁切)」時的智慧襯底:在部落格文章列表或商品列表卡片中,若您選擇「完整顯示(不裁切)」並放入正方形、直式或寬扁的圖片,系統會自動判斷圖片四邊的顏色 - 白底或單色底產品圖會自動延伸相同底色與卡片融為一體(不會露出突兀的灰色邊塊);透明去背圖會直接呈現卡片原本的乾淨底色;四邊不同色的實景照片則會自動以同色系柔和模糊光暈襯底。
ALT 文字(替代文字)是一段簡短描述圖片內容的文字。當網路不穩圖片無法載入時,它能提供替代說明;視障訪客的螢幕閱讀器會朗讀這段文字;Google 等搜尋引擎也會靠它理解圖片主題。
請具體描述「畫面上看得到的重點」,不要只填檔名或重複塞入關鍵字:
| 不佳寫法 | 較佳寫法 |
|---|---|
IMG_1234.jpg、產品圖片_01 | 咖啡工作室吧台上的手沖咖啡與淺焙豆 |
| 咖啡、精品咖啡、手沖咖啡推薦 | 咖啡師使用細口壺沖煮單品咖啡的特寫 |
| 我們最好的服務 | 顧問在會議桌旁向兩位創辦人說明品牌策略 |
如果您忘記填寫 ALT 文字,在發布網站、發布文章或儲存商品後,系統會在背景自動為空白的圖片描述補上說明(不會覆蓋您已手寫的文字)。若想檢查全站圖片描述品質或批次交給 AI 改寫,請見。
當您還在構思版面、尚未拍好實景照片時,可在圖片選擇器點選「圖庫」,直接搜尋並套用免費照片:
依 Pexels License 與 Pixabay Content License 條款,兩大圖庫的照片皆可免費用於個人與商業網站,不需另外付費,也不強制在公開網頁標註攝影師姓名(Kanorio 會在選圖介面顯示攝影師資訊與來源連結,方便您查閱)。
使用時請留意三個界線:
當有人把您的網頁連結貼到 LINE、Facebook、X(Twitter)或 LinkedIn 時,聊天室出現的預覽縮圖稱為「分享圖(OG 圖)」,它和頁面模組裡的圖片是分開設定的。請在「SEO › 頁面」或編輯器的頁面設定中管理,完整說明請見。
brand-logo-dark.svg、studio-front-door.jpg),日後在媒體庫搜尋檔名會快很多。在頁面主視覺、圖文並排、卡片與多連結卡片等固定比例欄位,Kanorio 會直接保存您的整張原圖,並在選好圖片後打開「調整焦點」視窗,讓您點選要保留的畫面重心(例如人臉或商品)。這樣無論訪客用電腦或手機瀏覽,都不會切掉重點,日後換版型也不必重傳圖片。
可以。您可以直接選擇 .heic 或 .heif 照片上傳,系統會保存原檔,並在訪客瀏覽網站時自動轉成所有手機與電腦都能看的格式。若遇到極少數無法識別的特殊編碼,請先在手機相簿或電腦匯出為 JPG 再上傳。
通常是因為原始圖片本身的像素太小(例如從通訊軟體轉傳被壓縮過的圖),放到滿版封面時被放大所致。系統不會壓壞您的原圖,請換一張解析度較高的原始照片,並在「調整焦點」確認露出的範圍。