自動藝術指導的響應圖像？ 幹得好。

已發表: 2022-03-10
快速總結↬

在許多項目中，響應式圖像不是技術問題，而是戰略問題。 使用 srcset 和 size 將不同的圖像傳送到不同的屏幕在技術上是可行的element 和 Picturefill（或類似的）polyfill； 但是所有這些圖像變體都必須創建、調整併融入現有 CMS 的邏輯中。 這並不容易。

在許多項目中，響應式圖像不是技術問題，而是戰略問題。 使用 srcset 和 sizes 以及 <picture> 元素和 Picturefill（或類似的）polyfill 將不同的圖像傳送到不同的屏幕在技術上是可能的； 但是所有這些圖像變體都必須創建、調整併融入現有 CMS 的邏輯中。 這並不容易。

最重要的是，還必須生成響應式圖像標記並將其添加到 HTML 中，如果在某個時候出現新的圖像變體（例如 WebP 等文件格式或大型橫向/縱向變體），標記具有要被更新。 所需的額外工作量通常會帶來麻煩——因此，如果您有完美的產品拍攝，您需要手動創建移動、縱向和橫向以及更大視圖的變體，或者構建插件和擴展以以某種方式自動化該過程。

壓縮圖像技術
壓縮圖像技術：文件尺寸加倍，以最差的質量保存。

有時變通辦法也很有效。 其中之一是壓縮圖像，這是一種巧妙的技術，它表明壓縮水平比其物理尺寸產生的差異更大。 因此，用 Scott Jehl 的話說，“給定在網站上以相同大小顯示的兩張相同的圖像，如果它既高度壓縮又比顯示的尺寸大得多，那麼其中一張的文件大小可能會大大小於另一張。 ”

關於 SmashingMag 的進一步閱讀：

  • 帶有 CSS 背景圖像的簡單響應式圖像
  • 使用 Mobify.js 自動化您的響應式圖像
  • 如何在響應式網頁設計中解決自適應圖像問題
  • 帶有藝術指導的WordPress中的響應式圖像
跳躍後更多！ 繼續往下看↓

所以基本上我們可以放大給定的圖像，在 Photoshop 中以最差的質量保存它，然後讓瀏覽器進行重新縮放——平均而言，通過網絡發送的實際圖像尺寸會更大，但尺寸會縮小大約 50-65%文件大小。 現在，這是一個很大的不同。 它適用於實際項目。

缺點：我們將工作卸載到客戶端，如果用戶選擇保存圖像，他們將得到一個非常次優的版本。 它也不能幫助我們處理藝術指導的圖像。 這不是我們正在尋找的一個乾淨的解決方案。

魔鬼在……後端！

一個常見的場景是在 CMS 中集成某種後端邏輯，允許內容管理器上傳圖像，為每個給定圖像定義焦點，並動態生成每個圖像的所有這些裁剪變體。

使用 imgix 裁剪熵。
使用 imgix 進行自動興趣點裁剪，使用crop=entropy參數進行智能自動裁剪。

“裁剪”位是一個棘手的問題，如果您在沒有藝術指導的情況下調整圖像大小並允許瀏覽器選擇最適合的圖像，這不會是一個大麻煩 - 你可以使用 ImageMagick 或任何其他圖像編輯工具進行重新縮放，或者 CMS 插件可以為您處理它：例如 Mobify.js API、WordPress 核心中的響應式圖像以及 Drupal 的解決方案。

但是，如果藝術指導確實很重要——例如，如果你想將非常具體的產品照片發送到不同類型的屏幕——你將不得不研究更高級的選項。 為狹窄的視口縮小的寬風景照片不會特別有用，放大的窄圖像也不會在寬屏幕上填充整個視口。 這就是我們需要更好、更智能的解決方案的地方。

那麼有哪些選擇呢？

好吧，我們可以通過 Photoshop 中的內容感知填充來運行批處理，或者使用 Smartcrop.js 之類的工具，這是一個使用 JavaScript 實現內容感知圖像裁剪的相當簡單的實現。 我們甚至可以將 smartcrop-cli（連同 ImageOptim-CLI）集成到我們的 Grunt 和 Gulp 構建過程中，並動態裁剪圖像。 您還可以將 imgix 與它的自動興趣點裁剪一起使用。 這已經是一個很好的開始，但我們需要手動為所有這些變體編寫標記。

Smartcrop.js
Smartcrop.js，一個使用 JavaScript 進行內容感知圖像裁剪的相當簡單的實現。

好消息：街區附近有一個新孩子。 就在幾天前，我們寫了關於響應式圖像斷點生成器的文章，這是一個小型開源工具，可讓您以交互方式計算圖像的斷點。 基本上，您可以上傳圖像，該工具將檢測適當的斷點、重新縮放圖像並生成響應式圖像標記，然後您可以將其複制/粘貼到 HTML 中。 您可以更進一步，使用該工具的 API 自動製作直接響應式圖像。

Smartcrop.js
Eric Portis 的藝術指導響應式圖像演示，基於他關於自動生成的藝術指導圖像的文章。

正如 Eric Portis 在他的文章中解釋的那樣，在使用 Cloudinary API 時，您可以指定一個crop_mode ，它允許您模仿 CSS 中background-size: cover 。 除了提供高度和寬度之外，您還可以使用gravity參數、縮放因子和供應縱橫比來指定焦點，這可以使 URL 更易於閱讀。 事實上，該 API 支持人臉檢測，因此如果您的圖像包含人臉，則藝術指導可以自動化，並有更高的可能性進行相當不錯的裁剪。

如果您希望能夠明確定義圖像的焦點，您可能需要查看 Sizzlepig（不是免費的），這是一種可以與 Google Drive 和 Dropbox 集成的瀏覽器內圖像批處理工具，並允許您更改裁剪並為每個圖像縮放。

概括

理想情況下，我們希望有一種工具可以生成“足夠智能”的裁剪並自動在構建中插入響應式圖像標記，或者提供一個界面來直觀地調整圖像的焦點並輸出“準備就緒”去”標記。 我們還沒有完全到達那裡，但我們可能很快就會到達。

與此同時，在處理一項相當艱鉅的任務（手動或通過構建自定義 CMS 插件）生成藝術指導的圖像變體時，上面列出的工具可能是足夠好的選擇。