TwicPicsコンポーネント

TwicPicsとは？

TwicPics は、レスポンシブメディアサービスソリューション (SaaS) で、オンデマンドでレスポンシブな画像と動画の生成を可能にします。

TwicPicsを使えば、開発者はメディアの高解像度バージョンだけを扱い、エンドユーザーは最適化され、完璧なサイズで、デバイスに適応したバージョンを彼らに近いサーバーから配信されます。

TwicPicsはプロキシとして機能します。Webサーバー、クラウドストレージ、またはDAMからマスターファイルを取得し、デバイスに適応したバージョンを最高クラスの圧縮で生成し、利用可能な最も近い配信ポイントからエンドユーザーに直接配信します。

TwicPicsコンポーネントとは？

TwicPicsコンポーネントは、プロジェクトでTwicPicsの力を簡単に解き放つためのウェブコンポーネントのコレクションです。

コンテンツ画像を表示する必要がある場合でも、短い動画を紹介する場合でも、Large Contentful Paint (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" />

サポートされるフレームワーク

• 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)
• ウェブコンポーネント

オンラインデモンストレーション

どのようなフレームワークで作業していても、TwicPicsは、画像と動画を配信し、必要なだけレスポンシブにするための最も効率的なソリューションです。

デモと統合例をご覧ください

• Angular
• React、Next.js および Gatsby.js
• Vue.js (バージョン2)、Vue.js (バージョン3)、Nuxt.js (バージョン2) および Nuxt.js (バージョン3)
• Svelte (バージョン3)、Svelte (バージョン4)、Svelte (バージョン5) および SvelteKit

ご質問とフィードバック

issue を提出するか、[email protected] にメールでお気軽にお問い合わせください。