TwicPics コンポーネント

TwicPics Components

TwicPicsとは？

TwicPics は、オンデマンドのレスポンシブ画像＆動画生成を可能にするレスポンシブメディアサービスソリューション（SaaS）です。

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

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

TwicPicsコンポーネントとは？

TwicPicsコンポーネントは、プロジェクトでTwicPicsのパワーを簡単に活用できるようにするWebコンポーネントのコレクションです。

コンテンツ画像を表示する必要がある場合でも、短いビデオを披露する必要がある場合でも、Largest 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"
/>

コンテンツ画像を表示する

最適化されたCumulative Layout Shift (CLS)、Low-Quality Image Placeholder (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)
Webコンポーネント

オンラインデモ

どのフレームワークを使用する場合でも、TwicPicsは、画像と動画を配信し、必要に応じてレスポンシブにするための最も効率的なソリューションです。

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

質問とフィードバック

issueを送信するか、support@twic.picsまでお気軽にお問い合わせください。

@twicpics/components