TwicPics 组件

TwicPics Components

什么是 TwicPics？

TwicPics 是一种**响应式媒体服务解决方案**（SaaS），能够**按需生成响应式图像和视频**。

使用 TwicPics，开发人员只需处理媒体的高分辨率版本，而最终用户则会收到**经过优化、大小完全匹配、设备适配**的版本，这些版本**通过距离他们最近的服务器提供**。

TwicPics 充当**代理**。它从您的 Web 服务器、云存储或 DAM 中检索您的主文件，并生成一个**设备适配**版本，该版本具有**一流的压缩**功能，并直接从**最近的可用交付点**传递给最终用户。

什么是 TwicPics 组件？

**TwicPics 组件**是一组**Web 组件**，使用它们可以轻松地在您的项目中释放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 脚本的标准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" />

支持的框架

Angular（版本 11+）
React、React Native、Gatsby 和 Next.js
Svelte（版本 3）、Svelte（版本 4）、Svelte（版本 5）和 SvelteKit
Vue.js（版本 2）、Vue.js（版本 3）、Nuxt.js（版本 2）和 Nuxt.js（版本 3）
Web 组件

在线演示

无论您使用什么框架，TwicPics 都是交付图像和视频并使其具有所需响应能力的最有效解决方案。

探索我们的演示和集成示例，适用于

问题和反馈

请随时提交问题或通过电子邮件[email protected]向我们咨询任何问题。

@twicpics/components