TwicPics 组件

TwicPics Components

什么是 TwicPics？

TwicPics 是一个 响应式媒体服务解决方案 (SaaS)，它可以实现 按需响应式图像和视频生成。

使用 TwicPics，开发者只需处理他们媒体的高分辨率版本，而终端用户可以收到 优化的、尺寸完美、设备适配的 版本，这些版本 从靠近他们的服务器交付。

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

什么是 TwicPics 组件？

TwicPics 组件 是一个 Web 组件集合，它可以非常轻松地在您的项目中使用 TwicPics 的强大功能。

无论您需要显示内容图像、展示短视频，还是通过 最大内容ful 绘制 (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" />