優化樂隊網站圖像的 5 種方法

如今，網站可以出現在數百種不同的屏幕尺寸上，甚至在同一設備上以不同的方向（橫向或縱向）。 人們看到您網站的顯示器在移動設備上可能只有幾百像素寬，而在較新的高清寬屏顯示器上則高達數千像素寬。

因為新技術提供了人們可以看到您的網站的一系列屏幕尺寸，所以它還需要一種新的網站設計思維方式，以確保網站在任何屏幕上看起來都很棒 - 大或小、高或寬。

這就是“響應式”網站設計概念發揮作用的地方！

響應式設計的工作原理

響應式網站的構建使得位置和大小與它們被查看的空間“相對”。當您的網站在不同的顯示器上查看時，它將通過拉伸或收縮來適應； 四處移動以適應可用空間。

您上傳到 Bandzoogle 網站的任何照片都會根據圖片所在的“空間”大小進行拉伸和縮放。

對於標題圖像，這一點尤其重要，因為響應式圖像將盡可能“適合”框架。 裁剪一堆圖片的工作越少，意味著播放音樂的時間越多，對吧？

讓我們看一下優化樂隊網站上的圖像以使您的設計恰到好處的五種方法。

1.選擇正確的圖像

響應式設計將頁面元素（如標題圖像）“按比例”縮放到您使用的圖像文件的原始大小，並將“相對”於頁面上設置的圖像空間進行此操作。

這意味著在所有設備上都保持圖像比例，並且圖像將始終盡可能“填充”它們所在的空間。 這可能會導致標題圖像的部分圖片看起來“被截斷”——這在響應式設計中是不可避免的，但選擇適合裁剪的圖像會有所幫助。

藝術家：悲劇安

台式機和寬屏

在筆記本電腦上，標題圖像將相對於屏幕寬度進行縮放。 在移動設備上，圖像將根據屏幕的高度進行縮放。

換句話說，您的圖片將始終相對於空間的最長邊進行縮放。

現在，想像一下在 1,000 像素寬的屏幕上 - 台式機/筆記本電腦的屏幕比它們的高度更寬，假設這個屏幕也是 570 像素高（對於很多顯示器來說大約是 16:9 的比例）。

在這種情況下，我們的圖像在這個顯示器上是 1,000 像素寬，但已經縮放到 900 像素高，這意味著，在一個只有 570 像素高的空間中，它最終會在頂部和底部截斷 300 多個像素。圖片。 無頭照片，哎呀！

移動和縱向

對 600 像素高的移動屏幕示例進行相同的數學運算 - 假設相同的顯示器只有大約 320 像素寬。 當圖片適應此顯示時，圖像會在任一側被截斷（請記住，在 600 像素高的縱向屏幕上，圖像的尺寸會縮小到 667 像素寬）。

這是在樂隊照片邊緣惹惱鼓手的好方法，這很有趣！ 但是還是...

優化，然後上傳您的文件

你可以用一個很好的比喻來想像你在一個藝術畫廊裡構圖——如果你把莫奈的風景放在一個“惠斯勒的母親”肖像畫框裡，那個畫框會在畫框旁邊剪掉很多非常漂亮的睡蓮。你的畫。

這就是它可能變得棘手的地方 - 網站建設者無法預測您想要使用的圖像（或其中顯示的內容），但有選擇地添加哪些圖像是一個很好的第一步。

為您的標題選擇正確圖像的一些簡單提示：

• 避免使用“近距離裁剪”的圖像——圖像“焦點”周圍的空間或填充越多，焦點在不同顯示器上被截斷的可能性就越小。
  
• 使用大圖像 - 72dpi 尺寸的 2000 x 1800 通常適用於大多數 Bandzoogle 主題，並有助於確保您的圖像在每個顯示器上看起來都很棒。
  
• 嘗試使用方向接近“正方形”的圖像 - 它不一定是完美的正方形圖像，但盡可能接近圖片中的高度和寬度通常在任何顯示器上都可以很好地工作。 無論您以什麼方向查看您的網站，這個額外的空間都會為您提供喘息的空間。
  
• 盡量避免在圖片本身中使用帶有文字或徽標的圖片 - 您絕對不希望重要的文字或您的品牌被訪問者截斷！
  
• 在 Bandzoogle 主題編輯器的“標題/徽標”選項下添加您的徽標。 然後將標題中所需的任何文本添加到“號召性用語標題功能”。 這樣，您的重要消息不會被顯示邊緣切斷。

藝術家：馬丁和詹姆斯

2. 裁剪以適合您的主題

如果您已經上傳了圖像，Bandzoogle 會提供一些很棒的工具來讓它們顯示得更好！

我們的一些模板設計在加載時會顯示“全屏”，具有可調節的標題高度，可以在有限的空間中以不同的形狀顯示標題圖像（例如 Spotlight 模板），甚至可以將標題圖像設置為背景您的頁面（例如 Slice）。

使用不同的標題選項嘗試不同的主題很容易 - 您可以通過“編輯主題”>“查看主題”更改主題設計，選擇您想要的主題，在設計編輯器中自定義該主題，單擊“保存”並發布您的變化。

如果主題沒有將您的標題設置為整頁背景圖片，您還可以調整您添加的圖片的相對縮放和位置。

在“編輯內容”中，單擊“編輯內容”選項卡中的標題圖像，然後在標題編輯器中，單擊標題圖像縮略圖下方的“裁剪”鏈接。

然後，您可以使用縮放滑塊調整縮放，然後單擊/拖動圖像到相對位置。

3. 設置焦點

在標題編輯器中裁剪標題圖像時，您可能還會注意到圖像上方有一個小藍點 - 這是用於設置您的“焦點”。 這樣做是為了確保該點位於圖像上的任何位置，無論圖像的大小或方向如何，都將始終“聚焦”。

這對於上傳圖片的“焦點”未完全居中的圖像非常方便 - 在圖像焦點上單擊/拖動焦點將確保無論在不同屏幕上截斷什麼，焦點都在前面和中心.

設置裁剪、縮放和焦點後，只需單擊“保存”以應用裁剪，然後在標題編輯器中再次單擊“保存”以應用更改。

藝術家：安娜·巴西

4.自定義移動標題高度

移動屏幕和非移動屏幕之間的界限一直很模糊——以平板設備為例。 不夠大，不能成為“桌面”，但也不夠小，不能成為移動屏幕。

當您在許多平板電腦上以“橫向”查看網站時，該網站的顯示可能與在台式機或筆記本電腦屏幕上的顯示方式相同。 儘管將平板電腦作為“肖像”橫著轉動，一切都會發生變化——屏幕寬度的減小可以呈現更多“移動”元素，更接近您在手機上看到的內容。

大多數 Bandzoogle 主題默認設置為在縱向屏幕中顯示“全高”標題 - 如果您的標題圖像包含左側和右側的焦點，這可能會出現問題。

為此，如果您的主題沒有將標題設置為頁面的背景圖片，您可以通過“編輯主題”選項卡在“標題”設置中啟用“自定義移動標題高度”選項。

啟用後，單擊主題編輯器中的“移動預覽”圖標，然後調整“標題高度（移動）”滑塊 - 這有助於調整圖像所在的空間以更好地匹配圖像比例，並顯示更多圖片。 設置好後點擊“保存”！

5.添加過濾器

最後，您可以通過設置過濾器為標題圖像添加一些非常棒的氛圍。 帶出藍調，讓您的照片更具 70 年代電影風格，或者採用複古黑白。 這裡有很多選擇！

只需單擊 Bandzoogle 控制面板中的“編輯主題”選項卡，然後在“標題”選項下，您可以選擇預製過濾器，或創建自己的自定義過濾器樣式。

藝術家：卡琳·威廉姆斯

雖然有時可能會有點繞圈子，但網頁設計師的總體共識是響應式是您網站的更好方式。

它保證您的網站在現在和將來的每個可用屏幕上都看起來很棒並且清晰易讀，如果您的網站使用良好的響應式做法，像 Google 這樣的網站會給您更好的排名。

從長遠來看，對於管理自己網站的人來說，這也可以節省大量時間 - 了解優化圖像和內容的最佳方法是第一步，Bandzoogle 會負責其餘的工作！

只需點擊幾下，即可製作一個帶有響應式圖像的音樂網站。 立即使用 Bandzoogle 構建您的網站！