优化乐队网站图像的 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 构建您的网站！