Teachify 圖片尺寸與格式指南｜網頁編輯器（Page Builder）
網頁編輯器允許您自由設計頁面，以下是編輯器中各種元件所需的圖片資源。
為了獲得最佳的網站性能和用戶體驗，請遵循以下建議：
遵循推薦尺寸: 按照上述推薦尺寸準備圖片，以確保最佳顯示效果。
壓縮圖片: 在上傳前使用圖片壓縮工具減小檔案大小。
- 可使用 TinyPNG 或 Squoosh 等工具
- 壓縮可減少 50-80% 的檔案大小而不明顯降低品質
選擇適當的格式:
- 照片和複雜圖像使用 JPG/JPEG
- 需要透明背景的圖像使用 PNG
- 動畫使用 GIF
- 考慮使用 WebP 格式以獲得更好的壓縮率和質量
- 簡單圖形和圖標使用 SVG
為不同設備準備圖片:
- 為桌面、平板和手機準備不同尺寸的圖片
- 確保圖片在各種螢幕尺寸下都能良好顯示
Heading
| 用途 | 推薦尺寸 | 格式 | 備註 |
|---|---|---|---|
| Heading 1 | 1440 x 1920 像素 | PNG, JPG | 3:4 比例 |
| Heading 2 | 1440 x 900 像素 | JPG, PNG | 16:9 比例；圖片可能會經過調整位置及大小，以適應不同螢幕，若圖片含有標誌或文字，確保重要內容在中央區域，以避免被裁切。 |
| Heading 3 | 800 x 600 像素 | PNG, JPG | 4:3 比例 |
Brands (合作品牌 Logo)
| 用途 | 推薦尺寸 | 格式 | 備註 |
|---|---|---|---|
| Brand 1 (合作品牌 Logo) | 300 x 100 像素 | PNG, SVG | 帶透明度 |
Carousel (輪播圖)
| 用途 | 推薦尺寸 | 格式 | 備註 |
|---|---|---|---|
| Desktop | 1440 x 900 像素 | JPG, PNG | 16:9 比例；圖片可能會經過調整位置及大小，以適應不同螢幕，若圖片含有標誌或文字，確保重要內容在中央區域，以避免被裁切。 |
| Mobile | 1440 x 1440 像素 | JPG, PNG | 1:1 比例；圖片可能會經過調整位置及大小，以適應不同螢幕，若圖片含有標誌或文字，確保重要內容在中央區域，以避免被裁切。 |
| Mobile | 1440 x 1800 像素 | JPG, PNG | 4:5 比例；圖片可能會經過調整位置及大小，以適應不同螢幕，若圖片含有標誌或文字，確保重要內容在中央區域，以避免被裁切。 |
Features (特色圖片)
| 用途 | 推薦尺寸 | 格式 | 備註 |
|---|---|---|---|
| Feature 1 | 1440 x 1920 像素 | PNG, JPG | 3:4 比例 |
Testimonials (使用者見証)
| 用途 | 推薦尺寸 | 格式 | 備註 |
|---|---|---|---|
| Testimonial 1 頭像 | 300 x 300 像素 | PNG, JPG | 1:1 比例;會裁切成圓形 |
Teams (團隊成員)
| 用途 | 推薦尺寸 | 格式 | 備註 |
|---|---|---|---|
| Team 1 | 1200 x 630 像素 | JPG, PNG | 16:9 比例；圖片可能會經過調整位置及大小，以適應不同螢幕，若圖片含有標誌或文字，確保重要內容在中央區域，以避免被裁切。 |
| Team 2 | 1440 x 1920 像素 | JPG, PNG | 3:4 比例 |
圖片優化建議
為了獲得最佳的網站性能和用戶體驗，請遵循以下建議：
遵循推薦尺寸: 按照上述推薦尺寸準備圖片，以確保最佳顯示效果。
壓縮圖片: 在上傳前使用圖片壓縮工具減小檔案大小。
- 可使用 TinyPNG 或 Squoosh 等工具
- 壓縮可減少 50-80% 的檔案大小而不明顯降低品質
選擇適當的格式:
- 照片和複雜圖像使用 JPG/JPEG
- 需要透明背景的圖像使用 PNG
- 動畫使用 GIF
- 考慮使用 WebP 格式以獲得更好的壓縮率和質量
- 簡單圖形和圖標使用 SVG
為不同設備準備圖片:
- 為桌面、平板和手機準備不同尺寸的圖片
- 確保圖片在各種螢幕尺寸下都能良好顯示
更新時間： 13/03/2025
感謝！