TwicPics 組件

TwicPics Components

什麼是 TwicPics？

TwicPics 是一個 響應式媒體服務解決方案 (SaaS)，可實現 隨需應變的響應式圖片和影片生成。

透過 TwicPics，開發人員只需處理高解析度版本的媒體，而終端使用者則會收到 最佳化、完美尺寸、裝置適配 的版本，並從 離他們最近的伺服器 傳遞。

TwicPics 作為一個 代理伺服器。它從您的 Web 伺服器、雲端儲存或 DAM 檢索您的主檔案，並生成一個 裝置適配 版本，具有 一流的壓縮，直接從 最近的可用傳輸點 傳遞給終端使用者。

什麼是 TwicPics Components？

TwicPics Components 是一個 Web 組件集合，讓您能夠輕鬆釋放 TwicPics 在專案中的強大功能。

無論您需要顯示內容圖片、展示短片，還是確保 最大內容繪製 (LCP) 照護的最佳效能，TwicPics Components 都能滿足您的需求。

顯示關鍵圖片

如果您需要顯示具有 美術指導 支援的 關鍵圖片，您可以使用 <TwicPicture> 組件。

它是標準 picture 標籤的直接替換品，並且直接基於 TwicPics API，無需額外努力。

<!-- Before -->
<picture>
  <source
    media="(min-width: 1280px)"
    srcset="wide-image.jpg, wide-image-2x.jpg 2x, wide-image-3x.jpg 3x"
  >
  <source
    media="(min-width: 768px)"
    srcset="squared-image.jpg, squared-image-2x.jpg 2x, squared-image-3x.jpg 3x"
  >
  <img
    srcset="portrait-image.jpg, portrait-image-2x.jpg 2x, portrait-image-3x.jpg 3x"
    src="portrait-image.jpg"
  >
</picture>

<!-- After -->
<TwicPicture
  src="your-master-image.jpg"
  ratio="3/4, @md 1, @xl 16/9"
/>

顯示內容圖片

假設您想要顯示具有最佳化 累計版面配置偏移 (CLS)、低品質圖片預留位置 (LQIP) 和開箱即用的延遲載入的 像素完美圖片。在這種情況下，您可以使用 <TwicImg> 組件。

它是標準 img 標籤的直接替換品，基於 TwicPics Script。

<!-- Before -->
<img src="https://example.com/your-image.jpg" />

<!-- After -->
<TwicImg src="your-image.jpg" />

顯示影片

為了無縫播放透過 TwicPics 最佳化的影片，請使用 <TwicVideo> 組件。它是 <TwicImg> 的同級組件，並且充當標準 video 標籤的直接替換品。

<!-- Before -->
<video >
  <source src="https://example.com/your-video.mp4" type="video/mp4">
  <!-- ... other video sources ... -->
</video>

<!-- After -->
<TwicVideo src="your-video.mp4" />