本教學文件提供 Teachify 各種圖片的推薦尺寸和格式要求，以確保最佳的顯示效果和品牌一致性。

目錄

一般圖片要求

各版型推薦尺寸及格式

圖片優化建議

一般圖片要求

所有上傳的圖片都需要遵循以下要求：

最大檔案大小：10MB

支援的檔案格式:
JPG/JPEG：適合照片和複雜圖像
PNG：適合需要透明背景的圖像
WebP：更高壓縮率，保持高品質，推薦使用
SVG：適合圖標和簡單圖形，可無限縮放
GIF：僅限需要簡單動畫的圖片

Teachify 各版型推薦尺寸及格式

品牌識別類型

品牌 LOGO
尺寸：250 x 60 像素
檔案格式：建議 PNG, SVG，帶透明度。JPG 亦可。

💡 貼心建議：可選擇橫式長型的 LOGO，會較為清楚。



網站 Favicon 圖示：瀏覽器標籤顯示的小圖標（如下圖所示）
尺寸：64 x 64 像素
檔案格式：建議 ICO, PNG。JPG 亦可。



Open Graph（OG）：開放社交關係圖，Facebook、LINE 等社群分享顯示的圖
尺寸：1200 x 630 像素
檔案格式：建議 JPG, PNG。

首頁

主視覺（輪播圖）

尺寸： 建議 1440 x 500 像素，或 16:9 比例。 💡 輪播圖版位不限制高度，上傳的圖片不會被裁切！
檔案格式：JPG, PNG, WebP
RWD 響應式設計：圖片可能會經過調整位置及大小，以適應不同螢幕，若圖片含有標誌或文字，確保重要內容在中央區域，以避免被裁切。

📃 首頁輪播圖設定教學： 我的 Teachify 學院網站首頁想要有輪播大圖，該如何操作呢？

產品類型

包含課程、活動、文章、數位下載、會員方案等產品

產品列表橫幅：各個產品頁的主視覺

設定位置：學院設定／網站外觀
尺寸：1440 x 900 像素，或 16:9 比例。
檔案格式：JPG, PNG
RWD 響應式設計：圖片可能會經過調整位置及大小，以適應不同螢幕，若圖片含有標誌或文字，確保重要內容在中央區域，以避免被裁切。



產品類別封面：各個「分類」的主視覺

尺寸：1440 x 900 像素，或 16:9 比例。
檔案格式：JPG, PNG
RWD 響應式設計：圖片可能會經過調整位置及大小，以適應不同螢幕，若圖片含有標誌或文字，確保重要內容在中央區域，以避免被裁切。

產品卡片圖片：產品顯示於首頁／列表頁／類別頁面的視覺
尺寸：1200 x 630 像素，或 16:9 比例。
檔案格式：JPG, PNG
RWD 響應式設計：圖片可能會經過調整位置及大小，以適應不同螢幕，若圖片含有標誌或文字，確保重要內容在中央區域，以避免被裁切。

講者頁面

講者頭像：

300 x 300 像素，或 1:1 比例，會自動裁切成圓形
檔案格式：JPG, PNG

圖片優化建議

為了獲得最佳的網站性能和用戶體驗，請遵循以下建議：

遵循推薦尺寸: 按照上述推薦尺寸準備圖片，以確保最佳顯示效果。

壓縮圖片: 在上傳前使用圖片壓縮工具減小檔案大小。
- 可使用 TinyPNG 或 Squoosh 等工具
- 壓縮可減少 50-80% 的檔案大小而不明顯降低品質

選擇適當的格式:
- 照片和複雜圖像使用 JPG/JPEG
- 需要透明背景的圖像使用 PNG
- 動畫使用 GIF
- 考慮使用 WebP 格式以獲得更好的壓縮率和質量
- 簡單圖形和圖標使用 SVG

為不同設備準備圖片:
- 為桌面、平板和手機準備不同尺寸的圖片
- 確保圖片在各種螢幕尺寸下都能良好顯示

更新時間： 14/04/2025