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