twicpics
@twicpics/components

图片和视频组件 - 感知上下文的调整大小和裁剪、懒加载、LQIP、下一代格式、压缩、CDN。
1.38 万次下载55 星v0.33.0
florentbflorentb
jaubourgjaubourg
mbgspciimbgspcii

TwicPics 组件

NPM VersionLicense

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> 组件。

它是标准 img 标签的直接替代品，基于 TwicPics 脚本。

<!-- 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] 提问。