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] 向我们提问。