關於自適應影像庫

回應式影像庫是JavaScript模組,可動態調整從Scene7提供並內嵌至回應式網頁的影像品質。 此外,它在具有高密度螢幕的裝置上,提供改善的影像品質。 程式庫也可以回應性地轉換智慧型裁切和智慧型色票的結果。

示範URL

回應式影像庫最簡單的使用案例是定義影像寬度的斷點值清單。 此清單可確保在重新調整影像大小時,會載入和顯示適當的轉譯,因為網頁版面配置會隨著使用者調整瀏覽器視窗大小或變更裝置方向而改變。 程式庫會持續監視螢幕影像大小,每當達到新的斷點寬度時,就會從Scene7擷取新的影像轉譯。

示範URL

說明

1

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/responsive-static-image-simple.html

以下是回應式影像位於網頁寬度50%的容器中的簡單範例。 每次調整瀏覽器視窗大小時,容器寬度就會變更。 當影像寬度達到設定的中斷點之一時,就會下載並顯示新的轉譯。 目的是避免載入不必要的大型影像,並節省網路頻寬。

按一下URL以開啟網頁、調整瀏覽器視窗大小並監控網路流量。

2

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/responsive-static-image-bootstrap.html

以下引導示例說明了網頁中的相同使用案例。 根據Bootstrap CSS,加入回應式影像的版面儲存格會採用下列寬度之一:360、720和940像素。 這些值會作為中斷點傳遞至「自適應影像庫」。 因此,Scene7可確保用戶端的網路頻寬得到有效運用。 此外,它還可確保影像以所需的大小顯示,而不會因縮放用戶端瀏覽器而產生任何視覺不自然現象。

按一下URL以開啟網頁、調整瀏覽器視窗大小以達到不同的版面中斷點,並監控網路流量。

更進階的使用案例包括將不同的「影像預設集」或「影像伺服」指令(或兩者)與不同的斷點值產生關聯。

3

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/image-presets.html

在下一個範例中,會針對不同的中斷點大小使用不同影像品質和格式的影像預設集。 對於小斷點,會套用低品質預設集,強制「影像伺服」僅傳回壓縮為6色的GIF影像。 中斷點使用為高壓縮的JPEG配置的影像預設集。 最大斷點與使用無損PNG的高質量影像預設相關聯。 這種方法基於具有較大螢幕的設備具有更大頻寬和處理能力的假設,確保將高質量影像傳送到這種設備。

按一下URL以開啟網頁、將網頁瀏覽器視窗從大小調整大小,並注意影像品質的降低。

4

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/crops.html

除了「影像預設集」外,還可將特定的「影像伺服」指令與中斷點建立關聯。 下列範例說明如何隨著螢幕影像大小變小,逐漸將橫幅影像裁切至感興趣的區域。 在這裡,最大的斷點根本沒有任何「影像服務」命令,因此橫幅影像是完全可見的。 在中斷點處,會套用中度裁切,只會顯示文字為「執行中」的執行者。 在小斷點處,會套用更多裁切,以便只顯示產品。

按一下URL以開啟網頁並調整瀏覽器視窗大小。 請注意,隨著影像從大到小,影像會逐漸裁切。

5

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/template.html

您也可以搭配「影像伺服範本」使用「影像伺服」命令,根據影像大小控制特定範本參數。 在下一個範例中,會使用「影像伺服範本」,其中文字覆蓋的字型大小是使用 $fontsize參數參數化 的。 回應式影像的設定是使用較大的字型大小來縮小影像大小,以確保文字永遠可讀:

系統需求

伺服器硬體與軟體

  • Scene7 Image Serving 6.0.1或更新版本。

用戶端瀏覽器最低需求

  • Microsoft® Windows® 7或更新版本;Mac OS X 10.8或更新版本。
  • Firefox 23、Safari 6、Chrome 29、IE 9或更新版本。
  • iOS 6或更新版本。
  • 已在iPhone3GS或更新版本以及iPad2或更新版本上取得認證(僅限原生瀏覽器)。
  • Android OS 2.3或更新版本。
  • 目前不支援行動裝置上的Internet Explorer。

本頁內容