> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teachify.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Teachify 圖片尺寸與格式建議指南

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

# 目錄

* [一般圖片要求](#1-5lia6iis5zyw54mh6kab5rgc)

* [各版型推薦尺寸及格式](#1-teachify)

* [圖片優化建議](#2-5zyw54mh5ysq5yyw5bu66k2w)

# 一般圖片要求

###### 所有上傳的圖片都需要遵循以下要求：
 
1. **最大檔案大小**：10MB

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

# Teachify 各版型推薦尺寸及格式

### 品牌識別類型

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

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

![學院 LOGO](https://storage.crisp.chat/users/helpdesk/website/-/3/1/e/4/31e42744710f7a0/teachify001_13jnug.jpeg)

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

![網站 Favicon 圖示](https://storage.crisp.chat/users/helpdesk/website/-/3/1/e/4/31e42744710f7a0/teachify002_17vb50x.jpeg)

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

### 首頁

###### 主視覺（輪播圖）

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

📃 首頁輪播圖設定教學： [我的 Teachify 學院網站首頁想要有輪播大圖，該如何操作呢？](https://help.teachify.com/zh-tw/article/teachify-1ni28st/)

![](https://storage.crisp.chat/users/helpdesk/website/31e42744710f7a0/2025-03-04-124923_f5bv8c.png)

### 產品類型

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

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

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

![產品列表橫幅｜後台設定](https://storage.crisp.chat/users/helpdesk/website/31e42744710f7a0/2025-03-04-125902_1fuwtc0.png)

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

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

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

### 講者頁面

1. 講者頭像：

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

## 圖片優化建議

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

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

2. **壓縮圖片**: 在上傳前使用圖片壓縮工具減小檔案大小。
   - 可使用 [TinyPNG](https://tinypng.com/) 或 [Squoosh](https://squoosh.app/) 等工具
   - 壓縮可減少 50-80% 的檔案大小而不明顯降低品質

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

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