レスポンシブ画像ライブラリについて about-responsive-image-library

レスポンシブ画像ライブラリは、Dynamic Mediaから提供され、レスポンシブ Web ページに埋め込まれる画像の品質を動的に調整する JavaScript モジュールです。 また、高密度の画面を持つデバイスでの画質も向上します。 また、スマート切り抜きとスマートスウォッチからの結果を応答的にレンダリングすることもできます。

デモ URL section-4f72c1dc38bf4e03acfa5205733a05a5

レスポンシブ画像ライブラリの最も簡単な使用例は、画像の幅のブレークポイント値のリストを定義することです。 このリストを使用すると、ユーザーがブラウザーウィンドウのサイズを変更したり、デバイスの向きを変更したりして Web ページのレイアウトが変わるので、画像がサイズ変更された場合に、適切なレンディションが読み込まれて表示されます。 ライブラリは画面上の画像サイズを継続的に監視し、新しいブレークポイントの幅に達するたびに、Dynamic Mediaから新しい画像レンディションを取得します。

デモ URL
説明
1

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-simple.html?lang=ja

次に、レスポンシブ画像が Web ページの幅の 50%を占めるコンテナ内にある簡単な例を示します。 ブラウザーウィンドウのサイズが変更されるたびに、コンテナの幅が変更されます。 画像の幅が、説明のために 200、400、600 および 800 ピクセルで設定された設定済みのブレークポイントのいずれかに達すると、新しいレンディションがダウンロードされて表示されます。 目標は、不要な大きな画像を読み込まず、ネットワーク帯域幅を節約することです。

URL をクリックして、Web ページを開き、ブラウザーウィンドウのサイズを変更し、ネットワークトラフィックを監視します。

2

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-bootstrap.html?lang=ja

次のBootstrapの例は、Web ページでの同じ使用例を示しています。 BootstrapCSS に従って、レスポンシブ画像が追加されるレイアウトセルは、幅 360、720、940 ピクセルのいずれかを取ることができます。 これらの値は、レスポンシブ画像ライブラリにブレークポイントとして渡される値とまったく同じです。 したがって、Dynamic Mediaは、クライアントのネットワーク帯域幅が効果的に使用されるようにします。 また、現在の Web ページのレイアウトを考慮すると、画像は必要なサイズで表示され、クライアント側のブラウザーを拡大縮小する視覚的なアーティファクトは一切含まれません。

URL をクリックして、Web ページを開き、ブラウザーウィンドウのサイズを変更して別のレイアウトのブレークポイントに到達し、ネットワークトラフィックを監視できます。

より高度な使用例としては、異なる画像プリセットや画像サービングコマンドの関連付け、またはその両方を異なるブレークポイント値に関連付ける場合などがあります。

3

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/image-presets.html?lang=ja

次の例では、異なるブレークポイントサイズの異なる画質と形式の画像プリセットが使用されます。 小さなブレークポイントの場合は、低品質のプリセットが適用され、画像サービングは圧縮されたGIF画像を 6 色のみに返すように強制されます。 メディアのブレークポイントは、高圧縮のJPEG用に設定された画像プリセットを使用します。 最大のブレークポイントは、可逆圧縮 PNG を使用した高品質の画像プリセットに関連付けられます。 このような方法では、大きな画面を持つデバイスの帯域幅と処理能力が大きいという前提に基づいて、高品質の画像をこのようなデバイスに配信できます。

URL をクリックして Web ページを開き、Web ブラウザーウィンドウのサイズを大きくして小さくし、画質の低下に注目します。

4

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/crops.html?lang=ja

画像プリセットに加えて、特定の画像サービングコマンドをブレークポイントに関連付けることができます。 次の例は、画面上の画像サイズが小さくなるにつれて、バナー画像を対象領域に対して徐々に切り抜く方法を示しています。 ここでは、最大のブレークポイントには画像サービングコマンドがまったくないので、バナー画像は完全に表示されます。 中程度のブレークポイントでは、中程度の切り抜きが適用され、「実行中」というテキストを含むランナーのみが表示されます。 小さなブレークポイントでは、より多くの切り抜きが適用され、製品のみが表示されます。

URL をクリックして、Web ページを開き、ブラウザーウィンドウのサイズを変更します。 画像が大きいサイズから小さいサイズに切り抜かれるにつれて、徐々に切り抜かれていく様子に注目してください。

5

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/template.html?lang=ja

画像サービングテンプレートと共に画像サービングコマンドを使用して、画像サイズに基づいて特定のテンプレートパラメーターを制御することもできます。 次の例では、画像サービングテンプレートを使用し、テキストオーバーレイのフォントサイズが $fontsize パラメーター。 レスポンシブ画像は、画像サイズを小さくするために大きいフォントサイズを使用するように設定されており、テキストが常に読み取り可能なままになります。

必要システム構成 section-35ea9e9c79cc43d7bcefdc240340fba4

サーバのハードウェアとソフトウェア

  • Dynamic Media Image Serving 6.0.1 以降。

クライアントブラウザーの最小要件

  • Microsoft® Windows® 7 以降、macOS X 10.8 以降。
  • Firefox 23、Safari 6、Chrome 29、IE 9 以降。
  • iOS 6 以降。
  • iPhone3GS 以降およびiPad2 以降(ネイティブブラウザーのみ)で認定済み。
  • Android™ OS 2.3 以降。
  • モバイルデバイス上の Internet Explorer は、現在サポートされていません。
recommendation-more-help
a26166cd-f2f4-45ce-996d-96a0f0d6cf49