1. 製品
  2.   画像
  3.   JavaScript
  4.   PictureFill
 
  

さまざまな Web アプリケーションの QA レスポンシブ イメージ ポリフィル API

Picturefill は、さまざまな Web アプリケーションで使用できる使いやすく、スマートで応答性の高い API であり、ユーザーがデバイスに応じて適切なサイズ、画面解像度などを確認できるようにします。

レスポンシブ イメージ ポリフィル API である Picturefill は、オープン ソースで無料で使用でき、Javascript と HTML を使用して開発されています。主にアプリケーションのフロント エンドに使用され、エンド ユーザーがアプリケーションにアクセスするさまざまなデバイスを使用している可能性のあるプロジェクトに最適な機能を追加できます。

Picturefill は、ブラウザーの Picture 要素と Img 要素に追加のサポートと機能を提供します。これは、ユーザーがどのデバイスから Web サイトにアクセスしていても、画像が画面サイズと解像度に自動的に調整されるようにする最も簡単な方法の 1 つです。 Picturefill は、Safari、Internet Explorer 9、Google Chrome Mozilla Firefox など、多くのブラウザーでテストされています。

Previous Next

PictureFill の使用を開始する

NPM 経由で PictureFill をインストールするための推奨される方法。以下のコマンドでインストールしてください。

NPM 経由で PictureFill をインストールする

 npm install picturefill

無料の JavaScript API を使用してレスポンシブ画像を追加する

オープンソースの PictureFill ライブラリを使用すると、JavaScript 開発者はレスポンシブ画像をサイトに追加できます。これには、ピクセル密度の高いビューポートを使用する視聴者が高解像度のアセットを表示できるようにし、それに応じて調整することが含まれます。同様に、同一でサイズが異なる多数の画像をブラウザに提供できます。 Picturefill は、ユーザーの現在のビューポート サイズ、表示密度、および Web サイトのレイアウト内のアセットのサイズに最適なソースを整理して提供します。 Picturefill を使用すると、開発者はユーザーのビューポートに応じて表示する画像を決定することもできます。画像要素の助けを借りて、さまざまなサイズ、ズーム レベル、縦横比などを指定できます。

無料の JavaScript API を使用してイメージ ブレークポイントを指定する

Picturefill のもう 1 つの機能は、Web サイト上のソース画像のさまざまな解像度オプションを使用して、特定の画像ブレークポイントを定義できることです。 Picturefill には、特定の形式でサポートされていない画像形式の代替画像を決定するオプションも用意されています。これにより、Web サイトに画像表示エラーが表示されなくなります。

ブラウザのサポート

オープン ソースの Picturefill ライブラリは、さまざまな種類のブラウザーを完全にサポートしています。このライブラリはテスト済みで、Firefox、Google Chrome、Internet Explorer、Safari、Opera などの多数のブラウザでスムーズに動作します。 JavaScript が無効になっている場合、ブラウザーは alt 属性テキストをフォールバックとして見ることができます。ライブラリには、IE9 および古いバージョンの完全なサポートが含まれています。 IE9 以降では、picture タグのソース要素を video 要素ラッパーでラップする必要があります。次の例は、その方法を示しています。

 日本