什麼時候不應對Web圖像[視頻]

要對基於Web的視覺內容進行策略性思考，除了選擇要使用的圖像以外，您還需要做更多的事情。 您還必須確保這些圖像適用於大大小小的屏幕。

如果圖像適合所有屏幕尺寸，那就太好了。 上載一個文件（單一來源的圖片），一切順利。

並非所有圖像都能使您的生活變得如此輕鬆。 有時值得您花些時間提供圖像的多個版本，以使人們從任何設備上的圖像中獲得所需的信息。

因此，The Medicines Company內容策略高級總監Buddy Scalera說。 在他的“智能內容會議”演講中，“創建和執行可擴展的可視內容策略”，Buddy告訴我們，他全都用於單一來源……除非不是那樣。 他提倡他和其他人所說的“大部分是COPE”（COPE-M），尤其是在圖像方面。

COPE代表“一次創建，隨處發布”。 COPE內容是單一來源的內容。 在許多方面，COPE含量是理想的。 您只需創建一次內容塊（產品說明，規格，定義，圖像），系統便可以將該塊內容拉（而不是粘貼）成多個交付物。 當您更新源時，更新會在您的存儲庫中波動。 COPE內容優美。 效率很高。 這是合乎邏輯的。 它為公司節省了數百萬美元的翻譯成本。 它可以幫助他們避免尷尬，瘋狂，引起訴訟的不一致。 COPE適用於文本，音頻和視頻（如果您使用的是YouTube）。

但是，有時候COPE是錯誤的方法。 現代瀏覽器可重排您的文本，但圖像會按設備縮小。 在台式機上看起來很棒的圖像在智能手機上可能無法識別。 （你好，捏和縮放。）

那就是COPE-M中的M出現的地方。“儘管為多通道復用準備內容是一個很好的目標，但並不是所有內容都可以在COPE模型中有效地擴展，” Buddy說。

在本文中，我總結了Buddy在ICC演講中的建議。 這篇文章中的所有圖片均來自他的幻燈片，除非另有說明，否則所有語錄均來自他的講話以及我隨後與他的交談。

為什麼很難應付一些圖像

Buddy丟棄了他所謂的“真相炸彈”有關圖像的問題：它們與文本不同。

文本適合於單一來源，因為文本可以與外觀分開。 級聯樣式表使文本可以在一個實例之間變化，而無需更改基礎文本源。 他說：“文本是一種奇妙的，靈活的，可流動的，可重複使用的，與通道無關的資產，在數字世界中非常有用。”

圖片並非如此。 它們不能與外觀分離。 對於圖像，一種尺寸並不總是適合所有尺寸。

正如Justyn Hornor在幾年前所說的那樣，響應式Web設計的“房間裡的大象”就是如何處理圖像。 小圖像在手機上可能看起來很清晰，而在高分辨率監視器上看起來太小了。 大圖像可能需要很長時間才能在較小的設備上呈現，而較小的圖像就足夠了。

如何思考多來源圖片

您可能不會發現通過偶爾在高端和低端進行妥協而使單個映像適用於所有設備，而是至少偶爾值得上傳多個映像，然後告訴系統在哪個斷點使用每個映像。

斷點是系統停止拉取一幅圖像而改為拉取另一幅圖像的點–視設備的分辨率而定，是較大的圖像還是較小的圖像。 此圖顯示了三個可能的斷點：手機為320像素，平板電腦或大型手機為720像素，筆記本電腦為1,024像素。

斷點是根據設備的寬度定義的，因為我們具有無限的垂直滾動能力，但寬度有限。

Buddy描述了他公司的一個內容團隊印刷一本小冊子的時間，該小冊子包括一張圖表，回答醫生對某種產品的疑問。

該圖印刷精美。 然後他們把它放到一個網站上，變得越來越小。 在智能手機上查看時，該圖表不可讀。 人們在醫院的智能手機上查找東西的緊迫性。 他們需要答案。 他們不需要捏和縮放。

在許多情況下，可以將一張大圖片上傳到您的網站（換句話說，將圖片單源提供），然後讓瀏覽器為您縮放。 在其他情況下，當圖像被擠壓到一個小窗口或屏幕中時，圖像幾乎變得難以辨認。 為了說明這一點，Buddy顯示了瀏覽器縮放其女兒的800像素寬照片時會發生什麼：

這是一個COPE示例。 不幸的是，當瀏覽器將圖像縮放為狹窄的窗口或屏幕時，很難看到女孩的臉。 如果此圖像是圖表或圖表，則較小屏幕上的文本可能變得難以辨認。

對於對於品牌敘事至關重要的視覺元素，您可能需要付出額外的努力才能使用多個圖像。 Buddy稱之為“響應式藝術指導”的這種方法使人們有更好的機會在任何屏幕上分辨出重要的細節。

當Buddy將圖像寬度從800像素更改為400像素至200像素時，他還更改了圖像組成：這不是COPE。 這是圖像計劃。 這張800像素寬的照片將女孩和狗並排顯示為他所說的三幅水平照片。 這張400像素寬的照片將女孩們拉得更緊了，將狗the在前面，進行了兩幅寬的垂直拍攝。 200像素寬的鏡頭將所有三個圖形擠壓成一個圖騰柱排列。

如果您在瀏覽器中查看Buddy的示例頁面，並且拉伸並縮小了窗口，則每次到達HTML代碼中指定的一個斷點時，圖像都會更改。 要了解用戶體驗，請播放以下六秒鐘的視頻：

要在您自己的瀏覽器中遇到這種現象，請在可更改窗口寬度的設備上訪問Buddy的示例頁面。

雖然這篇文章不是關於如何編寫這種代碼的教程，但是您可能會發現查看這段代碼的外觀很有用：

需要注意的主要事情（在“ picture”標籤之間查看）是Buddy指定了三個源圖像：

• GirlsDog_200w.jpg
• GirlsDog_400w.jpg
• GirlsDog_800w.jpg

每個JPG文件都分配給一個斷點：

• 最大寬度：499px
• 最大寬度：799px
• 最小寬度：800px

您應該創建幾個斷點？ 您如何確定它們的最大和最小寬度？ 沒有規則。 Buddy指出，在一篇出色的文章中，Jason Grigsby說：“選擇圖像斷點是每個人都會面臨的事情，並且坦率地說，我沒有適合您的好答案。”

您可能不會為網站上的每個圖像創建多個圖像。 確定哪些圖像對您的客戶真正重要。 如果您知道圖像（例如，圖形，圖表，產品照片）對用戶確實很重要，請不要將其留給網絡瀏覽器來確定如何渲染該圖像。 控制住。

值得注意的是，某些數字資產管理（DAM）系統可以創建具有不同大小和比例的單個圖像的多個輸出。 它不會復制Buddy用單獨的照片所做的工作，但是您應該探索軟件系統提供的功能。

我可以建議的唯一規則是，您對圖像的戰略決策就像對其他任何內容的戰略決策一樣：問問自己觀眾的需求以及原因。 試驗各種圖像和斷點。 重複。

有關Buddy關於為視覺內容創建和執行可伸縮策略的更多意見，請參閱他帶註釋的ICC演示文稿。

何時多來源圖片

儘管您不想麻煩為每個圖像創建多個源文件，但請考慮將那些影響最大的圖像（例如，轉換頁面上的主圖像）進行多源處理。 正如好友所說：

考慮一下花在您網站上的所有資金。 如果讓機器決定如何處理所有圖像，而人們有時看不到關鍵圖像，那麼您就失去了機會。

您知道網站上的重要頁面和圖像。 您可能已經在分析軟件中對它們進行了標記。 Buddy說，在移動設備上測試這些頁面尤其重要，“不僅要在您的設計師用來創建內容的漂亮的寬屏顯示器上，”

還應考慮在大多數人在小型設備上查看的任何其他頁面上進行多來源圖像處理。 “看看您從智能手機設備獲得的流量。 如果像我們這樣，那麼65％的受眾就是您。 您必須迎合他們，” Buddy說。 如果智能手機用戶不按捏和縮放就無法讀取圖像，則可能需要針對小屏幕自定義圖像。

了解多源圖像的最好方法是在多台設備上測試您的網頁。 所有內容團隊-包括內容策略，設計，內容工程和用戶體驗方面的同事-需要了解您網站的圖像如何在智能手機上加載。 抓住一堆設備以及設計師，內容策略師或UX人員。 以客戶需要的方式加載內容。 “如果您精心加載在網站上的圖像看起來有些變形，請考慮使用瀏覽器縮放圖像資產的方式，” Buddy說，並做出相應計劃。

結論

在我們的內容系統變得足夠聰明以自動為人們提供任何設備上的每個圖像的理想體驗之前，請考慮何時對圖像進行複制，何時不對圖像進行複制。 可能需要付出額外的努力並多源某些圖像。

你的團隊呢？ 您有時會創建重要圖像的多個版本以適應各種屏幕尺寸嗎？ 通過在多個設備上測試圖像，您學到了什麼？ 在評論中讓我們知道。

以下是Buddy演講的摘錄：

訂閱我們的每週營銷者內容策略電子通訊，其中包含來自CMI首席內容顧問Robert Rose的獨家故事和見解。 如果您像我們遇到的許多其他營銷人員一樣，您將期待每個星期六閱讀他的想法。

封面圖片：Joseph Kalinowski /內容營銷學院