TwicPics 元件

TwicPics Components

什麼是 TwicPics？

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

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

TwicPics 充當代理。它會從您的網路伺服器、雲端儲存或 DAM 中檢索您的主檔案，並生成一個具有一流壓縮的裝置調整版本，並直接從最近的可用的傳送點傳送給終端使用者。

什麼是 TwicPics 元件？

TwicPics 元件是一個網路元件集合，可讓您在專案中輕鬆釋放 TwicPics 的強大功能。

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

顯示重要圖片

如果您需要顯示具有美術指導支援的重要圖片，您可以使用 <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> 元件。

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

<!-- 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" />