什么时候不应对Web图像[视频]

已发表: 2020-12-22

当不应对网络图像视频时 要对基于Web的视觉内容进行策略性思考,除了选择要使用的图像以外,您还需要做更多的事情。 您还必须确保这些图像适用于大大小小的屏幕。

如果图像适合所有屏幕尺寸,那就太好了。 上载一个文件(单一来源的图片),一切顺利。

并非所有图像都能使您的生活变得如此轻松。 有时值得您花些时间提供图像的多个版本,以使人们从任何设备上的图像中获得所需的信息。

因此,The Medicines Company内容策略高级总监Buddy Scalera说。 在他的“智能内容会议”演讲中,“创建和执行可扩展的可视内容策略”时,Buddy告诉我们,他全都用于单一来源……除非不是那样。 他提倡他和其他人所说的“大部分是COPE”(COPE-M),尤其是在图像方面。

COPE代表“一次创建,随处发布”。 COPE内容是单一来源的内容。 在许多方面,COPE含量是理想的。 您只需创建一个内容块(产品说明,规格,定义,图像),系统便可以将该块内容拉(而不是粘贴)成多个交付物。 当您更新源时,更新会在您的存储库中波动。 COPE内容优美。 效率很高。 这是合乎逻辑的。 它为公司节省了数百万美元的翻译成本。 它可以帮助他们避免尴尬,疯狂,引起诉讼的不一致。 COPE与文本,音频和视频(如果您使用的是YouTube)效果很好。

但是,有时候COPE是错误的方法。 现代浏览器可重排您的文本,但图像会按设备缩小。 在台式机上看起来很棒的图像在智能手机上可能无法识别。 (你好,捏和缩放。)

那就是COPE-M中的M出现的地方。“尽管为多通道复用准备内容是一个很好的目标,但并不是所有内容都可以在COPE模型中有效地扩展,” Buddy说。

@BuddyScalera说,创建一次,到处发布(COPE)通常是处理图像的错误方法。 #intelcontent点击鸣叫

在本文中,我总结了Buddy在ICC演讲中的建议。 这篇文章中的所有图片均来自他的幻灯片,除非另有说明,否则所有语录均来自他的讲话以及我随后与他的交谈。

涉及的相关内容:
用杀手Content的内容统治社交场景的11种方法

为什么很难应付一些图像

Buddy丢弃了他所谓的“真相炸弹”有关图像的问题:它们与文本不同。

文本适合于单一来源,因为文本可以与外观分开。 级联样式表使文本可以在一个实例之间变化,而无需更改基础文本源。 他说:“文本是一种奇妙,灵活,可流动,可重用,与通道无关的资产,在数字世界中非常有用。”

图片并非如此。 它们不能与外观分离。 对于图像,一种尺寸并不总是适合所有尺寸。

正如Justyn Hornor在几年前所说的那样,响应式Web设计的“房间里的大象”就是如何处理图像。 小图像在手机上可能看起来很清晰,而在高分辨率监视器上看起来太小了。 大图像可能需要很长时间才能在较小的设备上呈现,而较小的图像就足够了。

@jphornor说,对于响应式网页设计,一种尺寸并不能完全适合处理图像。 #intelcontent点击鸣叫

如何思考多来源图片

您可能不会发现通过偶尔在高端和低端进行妥协而使单个映像适用于所有设备,而是至少偶尔值得上传多个映像,然后告诉系统在哪个断点使用每个映像。

上载多个图像并告诉系统在每个断点处使用每个图像。 @BuddyScalera #intelcontent点击鸣叫

多源图像断点

断点是系统停止拉取一幅图像而改为拉取另一幅图像的点–视设备的分辨率而定,是较大的图像还是较小的图像。 此图显示了三个可能的断点:手机为320像素,平板电脑或大型手机为720像素,笔记本电脑为1,024像素。

断点是根据设备的宽度定义的,因为我们具有无限的垂直滚动能力,但宽度有限。

Buddy描述了他公司的一个内容团队印刷一本小册子的时间,该小册子包括一张图表,用于回答医生对某种产品的疑问。

该图印刷精美。 然后他们把它放到一个网站上,变得越来越小。 在智能手机上查看时,该图表不可读。 人们在医院的智能手机上查找东西的紧迫性。 他们需要答案。 他们不需要捏和缩放。

在许多情况下,可以将一张大图片上传到您的网站(换句话说,将图片单源提供),然后让浏览器为您缩放。 在其他情况下,当图像被挤压到一个小窗口或屏幕中时,图像几乎变得难以辨认。 为了说明这一点,Buddy显示了浏览器缩放其女儿的800像素宽照片时会发生什么:

浏览器比例示例

这是一个COPE示例。 不幸的是,当浏览器将图像缩放为狭窄的窗口或屏幕时,很难看到女孩的脸。 如果此图像是图表或图表,则较小屏幕上的文本可能变得难以辨认。

对于对于品牌叙事至关重要的视觉元素,您可能需要付出额外的努力才能使用多个图像。 Buddy称之为“响应式艺术指导”的这种方法使人们有更好的机会在任何屏幕上分辨出重要的细节。

@BuddyScalera说,对于与品牌叙述至关重要的#视觉元素,请使用自适应艺术指导。 点击鸣叫

响应性方向

当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用单独的照片所做的工作,但是您应该探索软件系统提供的功能。

我可以建议的唯一规则是,您对图像的战略决策就像对其他任何内容的战略决策一样:问问自己观众的需求以及原因。 试验各种图像和断点。 重复。

询问观众的需求以及原因。 尝试各种图像和断点。 重复。 @BuddyScalera点击鸣叫

有关Buddy关于为视觉内容创建和执行可伸缩策略的更多意见,请参阅他带注释的ICC演示文稿。

涉及的相关内容:
如何为移动受众打造视觉内容

何时多来源图片

尽管您不想麻烦为每个图像创建多个源文件,但请考虑将那些影响最大的图像(例如,转换页面上的主图像)进行多源处理。 正如好友所说:

考虑一下花在您网站上的所有资金。 如果让机器决定如何处理所有图像,而人们有时看不到关键图像,那么您就失去了机会。

@BuddyScalera说,多来源转换页面上的主要图像。 #intelcontent点击鸣叫

您知道网站上的重要页面和图像。 您可能已经在分析软件中对它们进行了标记。 Buddy说,在移动设备上测试这些页面尤其重要,“不仅要在您的设计师用来创建内容的漂亮的宽屏显示器上,”

还应考虑在大多数人在小型设备上查看的任何其他页面上进行多来源图像处理。 “看看您从智能手机设备获得的流量。 如果像我们这样,那么65%的受众就是您。 您必须迎合他们,” Buddy说。 如果智能手机用户不按捏和缩放就无法读取图像,则可能需要针对小屏幕自定义图像。

了解多源图像的最好方法是在多台设备上测试您的网页。 所有内容团队-包括内容策略,设计,内容工程和用户体验方面的同事-需要了解您网站的图像如何在智能手机上加载。 抓住一堆设备以及设计师,内容策略师或UX人员。 以客户需要的方式加载内容。 “如果您精心加载到网站上的图像看起来有些变形,请考虑使用浏览器缩放图像资产的方式,” Buddy说,并做出相应计划。

涉及的相关内容:
您的内容准备好进行移动收购了吗?

结论

在我们的内容系统变得足够聪明之前,可以自动为人们提供任何设备上每张图像的理想体验之前,请考虑何时对图像进行复制,何时不对图像进行复制。 可能需要付出额外的努力并多源某些图像。

你的团队呢? 您有时会创建重要图像的多个版本以适应各种屏幕尺寸吗? 通过在多个设备上测试图像,您学到了什么? 在评论中让我们知道。

以下是Buddy演讲的摘录:

订阅我们的每周营销者内容策略电子通讯,其中包含来自CMI首席内容顾问Robert Rose的独家故事和见解。 如果您像我们遇到的许多其他营销人员一样,您将期待每个星期六阅读他的想法。

封面图片:Joseph Kalinowski /内容营销学院