twicpics
@twicpics/components

圖片和影片元件 - 感知上下文的尺寸調整和裁剪、延遲載入、LQIP、下一代格式、壓縮、CDN。
14.3K 下載55 星v0.33.0
florentbflorentb
jaubourgjaubourg
mbgspciimbgspcii

TwicPics 元件

NPM VersionLicense

TwicPics Components

什麼是 TwicPics？

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

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

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

什麼是 TwicPics Components？

TwicPics Components 是一個 網路元件集合，可以輕鬆地在您的專案中釋放 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" />

支援的框架

線上演示

無論您使用哪種框架，TwicPics 都是最有效的解決方案，可以交付您的圖片和影片，並使其具有所需的響應性。

探索我們的演示和整合示例：

問題與反饋

請隨時提交 問題 或傳送電子郵件至 [email protected] 向我們提問。