Teachify 圖片尺寸與格式建議指南
本教學文件提供 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
圖片優化建議
為了獲得最佳的網站性能和用戶體驗，請遵循以下建議：
- 遵循推薦尺寸: 按照上述推薦尺寸準備圖片，以確保最佳顯示效果。
- 壓縮圖片: 在上傳前使用圖片壓縮工具減小檔案大小。
- 選擇適當的格式:
- 照片和複雜圖像使用 JPG/JPEG
- 需要透明背景的圖像使用 PNG
- 動畫使用 GIF
- 考慮使用 WebP 格式以獲得更好的壓縮率和質量
- 簡單圖形和圖標使用 SVG
- 為不同設備準備圖片:
- 為桌面、平板和手機準備不同尺寸的圖片
- 確保圖片在各種螢幕尺寸下都能良好顯示
更新時間： 14/04/2025
感謝！