點解圖片SEO咁重要？

Google圖片搜尋佔整體搜尋流量嘅相當比例。優化圖片唔單止影響圖片搜尋排名，仲直接影響你嘅網頁整體SEO表現：

• 頁面速度——未壓縮嘅圖片係網站載入緩慢嘅頭號元兇。Google研究顯示，頁面載入時間由1秒增加到3秒，跳出率增加32%
• Core Web Vitals——圖片直接影響LCP（最大內容繪製）同CLS（版面位移）兩個核心指標
• 無障礙存取——Alt Text幫助視障用戶理解圖片內容，亦都係法律合規嘅要求
• AI搜尋引擎——AI搜尋引擎依賴Alt Text同檔案名嚟理解圖片內容，呢啲資訊會影響你被引用嘅機會

第一步：圖片檔案命名規則

圖片嘅檔案名係Google理解圖片內容嘅第一個信號。好多人直接用相機或截圖工具嘅預設檔名（如IMG_20260313.jpg或Screenshot 2026-03-13.png），呢啲對SEO完全冇幫助。

正確命名規則

• 用描述性英文或中文拼音——描述圖片內容，例如hong-kong-web-design-portfolio.webp
• 用連字號(-)分隔——唔好用底線(_)或空格，Google將連字號視為詞語分隔符
• 保持簡潔——3-5個詞足夠，例如responsive-website-mobile-view.webp
• 包含相關關鍵字——自然地加入，唔好堆砌
• 全部小寫——避免大小寫混用導致URL問題

命名範例對比

❌ 錯誤：IMG_001.jpg
❌ 錯誤：photo.png
❌ 錯誤：網頁設計作品集截圖2026年3月版本最終版.jpg

✅ 正確：web-design-portfolio-2026.webp
✅ 正確：ecommerce-product-page-example.webp
✅ 正確：google-search-console-performance-report.webp

第二步：Alt Text正確寫法

Alt Text（替代文字）係圖片SEO嘅核心。佢嘅原始用途係當圖片無法顯示時提供文字替代，同時幫助屏幕閱讀器向視障用戶描述圖片。Google亦利用Alt Text嚟理解圖片內容。

撰寫原則

• 為人而寫，唔係為搜尋引擎——想像你要向一個睇唔到圖片嘅人描述佢
• 具體描述圖片內容——講出圖片入面有咩，唔好寫「圖片」或「相片」等多餘字眼
• 長度控制喺80-140字元——太短冇足夠資訊，太長會被截斷
• 自然融入關鍵字——如果圖片內容本身就同關鍵字相關，自然加入即可
• 裝飾性圖片用空Alt——純裝飾圖片應設定alt=""，令屏幕閱讀器跳過

Alt Text範例對比

❌ alt="圖片"
❌ alt="網頁設計 香港網頁設計 網頁設計公司 網頁設計服務"（關鍵字堆砌）
❌ alt=""（內容圖片唔應該留空）

✅ alt="EC Shop City為花店客戶設計嘅響應式網站首頁截圖"
✅ alt="Google Search Console效能報告顯示過去28天嘅點擊趨勢圖"
✅ alt="香港中環商業區嘅辦公室大堂接待處"

PHP動態生成Alt Text範例

如果你嘅網站係用PHP開發，可以為產品圖片動態生成Alt Text：

<img 
  src="/images/products/<?php echo $product['image']; ?>" 
  alt="<?php echo htmlspecialchars($product['name'] . ' - ' . $product['brand'] . ' | ' . $product['category']); ?>"
  width="800" 
  height="600"
  loading="lazy"
>

第三步：圖片格式選擇——WebP vs AVIF vs JPEG

揀啱圖片格式可以大幅減少檔案大小，同時保持視覺質量。以下係2026年三大主流格式嘅比較：

2026年建議策略

WebP係目前最安全嘅首選格式——佢喺壓縮效率同瀏覽器相容性之間取得最好嘅平衡。AVIF壓縮效率更高，但編碼速度較慢，適合預先處理嘅靜態圖片。最佳做法係用<picture>標籤提供多格式fallback：

<picture>
  <source srcset="/images/hero-banner.avif" type="image/avif">
  <source srcset="/images/hero-banner.webp" type="image/webp">
  <img src="/images/hero-banner.jpg" alt="EC Shop City香港網頁設計服務主視覺橫幅" width="1200" height="600">
</picture>

瀏覽器會自動揀佢支援嘅最佳格式，唔支援新格式嘅舊瀏覽器會自動fallback到JPEG。

第四步：圖片壓縮實操

就算用咗WebP格式，如果唔經過適當壓縮，檔案大小仍然可以好大。以下係壓縮嘅具體建議：

壓縮品質建議

• 相片類圖片（產品圖、人像、風景）——WebP品質設定75-85%，肉眼幾乎睇唔到差別
• 圖表、截圖、文字圖片——WebP品質設定85-95%，保留文字清晰度
• Logo、Icon——用SVG格式（矢量），無需壓縮且無限縮放唔失真
• 目標檔案大小——一般內容圖片控制喺100KB以內，Hero Banner控制喺200KB以內

推薦免費壓縮工具

• Squoosh（squoosh.app）——Google開發嘅線上工具，支援WebP/AVIF，可即時預覽壓縮效果
• TinyPNG（tinypng.com）——批量壓縮PNG/JPEG/WebP
• ImageMagick——命令列工具，適合批量處理，可整合到部署流程

PHP批量轉換WebP範例

// 將JPEG轉換為WebP（PHP 8.x + GD庫）
function convertToWebP($sourcePath, $outputPath, $quality = 80) {
    $image = imagecreatefromjpeg($sourcePath);
    if ($image) {
        imagewebp($image, $outputPath, $quality);
        imagedestroy($image);
        return true;
    }
    return false;
}

// 用法
convertToWebP('/images/product.jpg', '/images/product.webp', 80);

第五步：Lazy Load延遲載入實作

Lazy Load（延遲載入）係指圖片唔會喺頁面一載入就全部下載，而係當用戶捲動到附近時先至載入。呢個技術可以將初始頁面載入時間減少30-70%，對Core Web Vitals嘅LCP指標有顯著改善。

方法一：原生HTML Lazy Load（最推薦）

現代瀏覽器已原生支援loading="lazy"屬性，唔需要任何JavaScript：

<img 
  src="/images/product-example.webp" 
  alt="網店產品頁面設計範例" 
  width="800" 
  height="600" 
  loading="lazy"
>

方法二：JavaScript Intersection Observer（進階控制）

<img 
  data-src="/images/product-example.webp" 
  alt="網店產品頁面設計範例" 
  width="800" 
  height="600" 
  class="lazy"
>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('img.lazy');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy');
        observer.unobserve(img);
      }
    });
  }, { rootMargin: '200px' });
  lazyImages.forEach(img => observer.observe(img));
});
</script>

Lazy Load關鍵注意事項

• 首屏圖片唔好Lazy Load——頁面頂部嘅Hero Image、Logo等首屏可見圖片應該直接載入，否則會損害LCP分數
• 必須設定width同height——防止圖片載入時造成版面跳動（CLS問題）
• Google已完全支援——Googlebot可以正確索引loading="lazy"嘅圖片
• 配合頁面載入速度優化——Lazy Load係整體速度優化策略嘅一部分

第六步：響應式圖片 srcset 設定

唔同裝置嘅屏幕大小差異極大——手機屏幕可能只有375px寬，但桌面顯示器可以超過2560px。向手機用戶提供2560px嘅大圖係極度浪費頻寬嘅。srcset可以令瀏覽器自動揀選最適合嘅圖片尺寸。

<img 
  srcset="/images/hero-400w.webp 400w,
          /images/hero-800w.webp 800w,
          /images/hero-1200w.webp 1200w,
          /images/hero-1600w.webp 1600w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1024px) 800px,
         1200px"
  src="/images/hero-1200w.webp"
  alt="EC Shop City網頁設計服務展示"
  width="1200"
  height="600"
  loading="lazy"
>

呢個做法配合響應式網頁設計，可以確保每個裝置都載入最適合嘅圖片大小，手機用戶唔會因為下載過大嘅圖片而等待。

額外加分技巧

1. 圖片Sitemap

將重要圖片加入XML Sitemap，幫助Google更全面咁發現同索引你嘅圖片。你可以喺現有Sitemap加入<image:image>標籤，或者建立獨立嘅圖片Sitemap。喺Technical SEO嘅Sitemap章節有更詳細嘅說明。

2. 結構化數據配合圖片

如果你已部署咗Schema Markup，確保Product Schema、Article Schema入面嘅image欄位指向正確嘅高質量圖片。呢啲圖片更有機會出現喺Google Rich Results。

3. Open Graph同Social圖片

為每個頁面設定OG Image標籤，當你嘅頁面被分享到Facebook、WhatsApp、LinkedIn時會顯示吸引嘅預覽圖：

<meta property="og:image" content="https://www.yourwebsite.com/images/og-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

4. CDN加速圖片載入

如果你嘅網站流量較大或者有海外用戶，考慮使用CDN（內容分發網路）嚟加速圖片載入。Cloudflare免費方案已包含基本CDN功能，對香港本地網站尤其有效。

圖片SEO快速檢查清單

每次上載圖片前，用呢個清單逐項確認：

1. 檔案名——描述性、用連字號分隔、全小寫 ✓
2. 格式——WebP為主，配JPEG fallback ✓
3. 壓縮——品質75-85%，檔案大小100KB以內 ✓
4. Alt Text——80-140字元、具體描述、自然融入關鍵字 ✓
5. 尺寸屬性——設定width同height防止CLS ✓
6. Lazy Load——非首屏圖片加loading="lazy" ✓
7. 首屏圖片——Hero Image唔好Lazy Load，優先載入 ✓
8. srcset——提供多尺寸版本適應唔同裝置 ✓
9. Sitemap——重要圖片已加入XML Sitemap ✓

圖片優化係一個持續嘅過程，建議每季用PageSpeed Insights同SEO檢查工具重新審視一次。如果你嘅網站有大量圖片需要優化，或者想建立自動化嘅圖片處理流程，歡迎聯絡EC Shop City。我哋嘅網上推廣服務同網頁設計服務已包含完整嘅圖片SEO優化，幫你嘅網站喺速度同排名兩方面都做到最好。