跳到內容
請注意::這篇文章的翻譯只是為了方便而提供。譯文透過翻譯軟體自動建立,可能沒有經過校對。因此,這篇文章的英文版本應該是包含最新資訊的管理版本。你可以在這裡存取這些內容。

在 HubSpot 內容中使用圖片

上次更新時間: 2025年5月6日

可搭配下列任何訂閱使用,除非另有註明:

所有產品和版本

您可以在HubSpot 內容的富文字模組或圖片模組中加入圖片。富文字模組支援多種類型的內容 (圖片、文字、CTA 等),而每個圖片模組只能包含一張圖片。

新增圖片

  • 導覽到您的內容:

    • 網站頁面:在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面:在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。 登陸頁面
    • 部落格:在你的 HubSpot 帳戶中,瀏覽「內容」>「部落格」。
    • 知識庫:知識庫: 在你的 HubSpot 帳戶中,瀏覽「服務」>「知識庫」。
    • 電子郵件:在你的 HubSpot 帳戶中,瀏覽「行銷」>「電子郵件」。
  • 點選您內容的名稱
  • 若要在電子郵件中加入圖片
    • 富文本模組:對於使用經典編輯器的電子郵件,點選富文本工具列上的insertImage ici圖示 拖放式電子郵件編輯器中的文字模組和自訂富文字模組 不能包含圖片。
    • 圖片模組: 使用拖曳式電子郵件編輯器的電子郵件,按一下圖片模組,然後按一下佔位圖片上方側邊列編輯器上的取代

請注意:只有 .png、.ico、.bmp、.jpg 和 .gif 圖檔可加入行銷電子郵件中

  • 要在頁面、文章或文章中加入圖片:
    • 富文字模組:按一下富文字模組,然後按一下富文字工具列上的insertImage ici圖示
    • 圖片模組:按一下圖片模組,然後按一下占位符圖片上方側邊欄編輯器中的取代
  • 選擇圖片:
    • 若要插入現有圖片,請按一下右側面板中的圖片
    • 要從電腦或透過檔案 URL 上傳新圖片,請點選右側面板的新增圖片。若要使用 Canva 的編輯工具建立新圖片,請按一下使用 Canva 設計。然後按一下圖片 以插入圖片
  • 插入圖片前,您可以優化圖片的載入時間或解析度。 在右側面板中,將滑鼠懸停在圖片上,然後按一下詳細資料
  • 然後按一下圖片最佳化 下拉式功能表,並選擇最佳化選項
    • :圖片將以更高解析度載入,但載入時間會增加。
    • 預設:圖片將同時優化解析度和載入時間。
    • :圖片將以較低的解析度載入,但載入時間會縮短。在我們的開發人員文件中瞭解更多關於優化頁面載入時間的 資訊。
KB - Image Optimization

編輯圖片

在內容中加入圖片後,您可以編輯其大小、加入 alt 文字、加入連結或設定其載入方式。

在富文本模組中編輯圖片

  • 導覽到您的內容:

    • 網站頁面:在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面:在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。 登陸頁面
    • 部落格:在你的 HubSpot 帳戶中,瀏覽「內容」>「部落格」。
    • 知識庫:知識庫: 在你的 HubSpot 帳戶中,瀏覽「服務」>「知識庫」。
    • 電子郵件:在你的 HubSpot 帳戶中,瀏覽「行銷」>「電子郵件」。
  • 按一下內容的名稱
  • 在內容編輯器中,按一下圖片以顯示圖片編輯工具列。
  • 編輯圖片:
    • 若要調整文字包圍圖片的方式,請點選inline 對齊圖示
    • 若要調整圖片大小,請按一下寬度和高度箭頭或輸入像素值
    • 若要調整圖片周圍的襯墊,請按一下間距 下拉式功能表,然後輸入圖片圖示邊緣的像素值
  • 若要從富文字模組移除圖片,請按一下圖片,然後按一下delete 垃圾桶圖示
  • 若要取代富文字模組中的圖片,請按一下圖片,然後按一下replace repl取代圖示,並新增圖片。
edit-image-in-rich-text-module
  • 若要連結圖片、新增 alt 文字或設定載入行為,請按一下圖片, 然後按一下鉛筆圖示 edit:
    • 若要為圖片加入連結,請按一下彈出方塊中的 連結至 下拉式功能表,然後選擇連結類別在下方欄位中,輸入連結的目的地。進一步瞭解不同類型的連結
    • Alt 文字 欄位中,輸入 文字以向搜尋引擎和螢幕閱讀器描述圖片的內容。您也可以在檔案工具中為圖片加入 Alt 文字。 加入 Alt 文字可以改善 網站的可存取性和 SEO。 在我們的開發人員文件中瞭解更多關於網站可存取性的資訊。

請注意: 為圖片新增 alt 文字不會新增標題文字。Alt 文字會影響搜尋引擎排名和可存取性,而標題文字則會在訪客將視線移至圖片上時出現。

  • 若要設定圖片載入行為和自訂搜尋引擎的圖片連結類型,請按一下進階
    • 若要設定圖片載入行為,請按一下圖片載入 下拉式 功能表,然後選擇選項
      • 懶惰: 圖片只會在訪客到達頁面的該部分時才載入。這可縮短頁面的載入時間,並改善 SEO。預設情況下,圖片將以此設定載入。
      • 瀏覽器預設值: 圖片的載入行為由訪客的瀏覽設定決定。
      • 急切: 頁面載入後,圖片會立即載入。
    • 若要自訂圖片連結類型,請在連結類型 部分,選擇一個或多個屬性
      • 一般: 此連結不會被贊助。
      • No follow:此連結與您的網站無關。
      • 贊助: 此連結為贊助連結或廣告。
      • 使用者產生的內容: 此連結指向使用者產生的內容,例如部落格評論或論壇討論。
  • 按一下套用,將您的變更套用至圖片。

add-link-and-alt-text-to-rich-text-image

  • 若要啟用您的變更,請按一下右上方的「發佈」 「更新」 ,然後在對話方塊中按一下「發佈」 「更新」

在圖片模組中編輯圖片

  • 導覽到您的內容:

    • 網站頁面:在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面:在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。 登陸頁面
    • 部落格:在你的 HubSpot 帳戶中,瀏覽「內容」>「部落格」。
    • 電子郵件:在你的 HubSpot 帳戶中,瀏覽「行銷」>「電子郵件」。
  • 按一下內容的名稱
  • 在內容編輯器中,點選圖片模組
  • 若要移除目前的圖片,請在側邊欄編輯器的圖片區 中點選移除。這將會從圖片模組移除目前的圖片,但不會從頁面移除模組。
  • 若要取代目前的圖片,請在側邊列編輯器的圖片區中按一下取代,然後再新增一張圖片
  • Alt 文字 欄位中輸入 文字,以便向搜尋引擎和螢幕閱讀器描述圖片的內容。您也可以在檔案工具中為圖片加入 Alt 文字。 加入 Alt 文字可以改善 網站的可存取性和 SEO。 在我們的開發人員文件中瞭解更多關於網站可存取性的資訊。

請注意: 為圖片新增 alt 文字不會新增標題文字。Alt 文字會影響搜尋引擎排名和可存取性,而標題文字則會在訪客將視線移至圖片上時出現。

replace-image
  • 若要設定圖片在不同裝置上的尺寸,請按一下尺寸 下拉式功能表並選擇 選項
    • 自動調整:圖片會依照檢視的裝置調整大小。
    • 精確的高度和寬度:影像在所有裝置上都顯示相同的大小。
  • 若要設定圖片大小的限制,請按一下最大尺寸 下拉式功能表,然後選擇 選項
    • 圖片原始大小:圖片不會顯示大於其原始大小。
    • 自訂:圖片不會大於在寬度 高度欄位中設定的特定寬度和高度
  • 若要設定圖片載入行為,請按一下圖片載入 下拉式 功能表,然後選擇選項
    • 瀏覽器預設: 圖片載入行為由訪客的瀏覽設定決定。
    • 懶惰: 圖片只會在訪客到達頁面的該部分時才載入。這可縮短頁面的載入時間,並改善 SEO。預設情況下,圖片會以此設定載入。
    • 急切:圖片會儘快載入。
  • 若要在圖片上加入連結,請在連結 (選用)欄位中輸入目的地 URL 。選取「在新標籤頁開啟連結 」核取方塊,將訪客引導至新瀏覽器標籤頁中的目標 URL。
  • 若要啟用您的變更,請按一下右上方的「發佈」 「更新」
set-image-size-and-loading-options

這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助