Dynamic Media 最佳实践 about-dm-best-practices
-
您是 Dynamic Media 的新手吗?如需快速、全面地了解 Dynamic Media,请参阅使用 Dynamic Media。
-
遵循 Dynamic Media 最佳实践,以获取最大价值。
-
试用带有快照工具的 Dynamic Media 图像功能。
-
使用自适应视频确保视频播放流畅。
-
使用智能裁剪自动裁剪图像。
-
使用智能裁剪自动裁剪视频。
-
传递交互式 3D 体验。
组织面临着与用户接触的渠道和设备急剧增加。 客户历程跨越实体商店、Web、移动、社交媒体、电子邮件和商务。 为了满足此需求,Adobe Experience Manager (AEM)上的Dynamic Media提供了一个全面的解决方案。 它可优化资产交付、处理个性化,并确保跨渠道和设备提供一致、高性能且品牌一致的体验。
Dynamic Media的一些关键原则包括:
- 单文件方法: 使用Dynamic Media,您可以存储一个主源文件,所有大小变化和视觉效果在交付时都会动态创建和优化。 此方法可节省存储成本并消除工作流的复杂性。
- 真正的全球化: 智能成像在内容交付期间应用,可显着减小图像大小和页面重量而不会影响视觉质量。 它针对网络带宽和设备像素比进行了优化。
- AI支持: 智能裁剪是AI驱动的功能,可自动裁剪图像和视频目标点。 它消除了手动操作并高效地扩展以供企业使用。
- 轻松的视频: 将主源视频上传到Dynamic Media,并使用描述性音频自适应地跨多种语言流式传输它们。
- 体验查看器库: 自定义图像和视频的体验查看器和品牌体验查看器。 这些查看器可无缝集成到您的数字体验中。
- 新兴格式支持: Dynamic Media允许交付3D和全景体验。
在您探索Dynamic Media历程时,查看下面的最佳实践综合列表可以帮助您充分利用其功能。 调整这些Dynamic Media最佳实践以满足您的特定上下文和项目要求,以使您可跨渠道和设备优化体验。
将资产摄取到Dynamic Media
业务案例: 有效地管理大量资产,并确保只向最终用户提供相关的批准内容。
高效地简化您对大量资产的管理。 使用Dynamic Media的 选择性同步 和 选择性发布 功能,确保只有相应的授权内容才能到达最终用户手中。
-
选择性同步:
主动功能,允许您选择要与Dynamic Media同步的资产。 例如,您可能决定仅同步那些包含已获得最终批准的资产的文件夹。 此工作流可帮助您保持对准备交付给客户的资产的控制。 -
选择性发布:
同步资产后,您可以通过选择性发布来控制哪些资产对客户可见。 此功能意味着您可以管理哪些经批准的资产是通过您的渠道实际交付的,确保您的客户只能看到最佳和最相关的内容。
这两个最佳实践可帮助您更好地控制、管理和提高富媒体内容的工作效率。
想要了解更多信息? 转到在Dynamic Media中的文件夹级别配置选择性发布。
Dynamic Media 查看器
Dynamic Media查看器最佳实践是基本准则,旨在优化AEM上Dynamic Media资源的性能、功能和用户体验。 这些实践可确保正确同步、发布和配置资产,以使用Dynamic Media的完整功能。
通过遵循这些最佳实践,您可以实现无缝集成、高效的资产管理和增强的查看器交互。 同步资源、使用智能裁剪以及遵守JavaScript文件包含准则都是重要实践。 这些建议有助于保持跨各种平台和设备的介质传送的完整性和可靠性。
-
同步查看器Assets:
在使用播放器之前,请确保所有查看器资产均与Dynamic Media同步。- 访问位于
/libs/dam/gui/content/s7dam/samplemanager/samplemanager的示例管理器页面。 通过此页面,您可以重新同步查看器的资产,包括现成图标、CSS文件和预设。 - 如果您遇到任何查看器问题,请转到Dynamic Media查看器疑难解答文章。
- 访问位于
-
发布Assets:
在投放查看器中查看资产之前,请确保已发布资产。 -
自动播放视频已静音:
对于视频中的自动播放功能,请使用静音视频设置,因为浏览器会限制按音量播放视频。 -
智能裁剪:
使用用于智能裁剪的图像v3组件增强图像资产呈现。 -
JavaScript文件包含:
页面上仅包含主查看器JavaScript文件。 避免引用查看器的运行时逻辑可能下载的其他JavaScript文件。 具体而言,请勿从/s7viewers上下文路径(称为合并的HTML include)直接链接到SDK5 SDKUtils.js库。 查看器的逻辑管理Utils.js或类似的运行时查看器库的位置,这些库可以在版本之间更改。 Adobe不会保留服务器上包含的旧版本辅助查看器,因此直接引用这些版本可能会破坏查看器在将来更新中的功能。 -
嵌入准则:
使用文档嵌入特定于每个查看器的准则。
想要了解更多信息? 转到AEM Assets🔗的查看器。 -
SDK教程和示例:
查看Viewer SDK教程和HTML5 SDK应用程序示例,以全面了解SDK组件API。
准备资产以进行交付
组织您的资源
业务案例: 有效地组织资源以简化工作流。
要获得可简化工作流的高效资产组织,请使用以下一个或多个最佳实践:
- 在文件夹中组织资源:
有效地组织资产包括将资产分类到文件夹中,类似于计算机上的文件组织。 正确的命名、结构化子文件夹以及这些文件夹中的文件管理对于高效的资产处理至关重要。 实施系统化的命名惯例和元数据惯例可最大限度地提高数字资产存储库的效用。
想要了解更多信息? 转到整理文件夹中的资源。 - 使用标记组织资源:
为资产添加标记可增强搜索性、收藏集创建和搜索排名。 Adobe Sensei的人工智能采用自学习算法来进行精确标记,从而实现快速资源检索。 Adobe Sensei还可以识别相关标记(包括自定义标记)并将它们分配给资产,通过自动的描述性标记来简化资产管理。
想要了解更多信息? 转到使用标记整理资源。 - 将资源组织为收藏集:
Dynamic Media与Experience Manager Assets相结合,可以高效地创建、编辑以及在用户之间共享资源集合。 您可以建立各种收藏集类型,包括静态列表和基于搜索的动态编译。 这些收藏集类型可通过可自定义的访问和编辑权限在多个位置共享。
想要了解更多信息? 转到将资源组织为收藏集。 - 使用配置文件组织资源:
处理配置文件可自动执行指定文件夹中的资产处理,从而简化组织。 随着数字资产收藏集的扩展,通过标准化元数据、文件名和文件夹结构,可以一致而准确地应用这些配置文件。
想要了解更多信息? 转到使用个人资料整理资源。
优化图像质量
业务案例: 从Dynamic Media获取高质量的图像。
提高图像质量需要仔细考虑各种因素。 这可能是一个非常耗时的过程。 但是,有一些行之有效的实践可以帮助您获得理想的结果。 其中一些最佳实践包括如何获得最佳图像大小、图像锐化以及要使用的最佳图像格式。
想要了解更多信息? 转到优化图像质量的最佳实践。
由于对图像质量的感知因人而异,因此有时系统地进行实验对于获得理想结果至关重要。 Adobe Experience Manager通过100多条Dynamic Media命令来增强图像,从而帮助实现了这个过程。
想要了解更多信息? 观看Dynamic Media快照(3分钟17秒)。
要评估这些不同命令对图像质量的影响,您可以将图像上传到Dynamic Media,在指定的URL上使用工具的界面,并应用要尝试的命令。
想试试吗? 启动动态媒体快照
对应用于图像的样式进行标准化
业务案例: 有效地标准化应用于我的图像资产的样式和转换。
可在Dynamic Media中定期使用图像预设,以便始终如一地动态调整图像大小、格式和属性。 将图像预设视为宏:它是一组指定的用于调整大小和设置格式的命令。 例如,如果您的网站需要各种大小和格式的产品图像,并对桌面和移动设备进行特定压缩,则图像预设会高效地自动完成此过程。
想试试吗? 转到创建图像预设的基础知识以渲染资产
调整图像和视频的焦点和帧设置
业务案例: 确保我的图像或视频的主要兴趣点跨设备保持焦点。
智能裁剪是Dynamic Media中的一项功能,它使用Adobe Sensei、Adobe的AI和机器学习框架来自动裁剪图像和视频。 它智能地检测并关注图像或视频中的主要主题或兴趣点。 这种智能功能可确保焦点在台式计算机和移动设备上的各种屏幕尺寸中得以保持。
最佳做法是使用智能裁剪创建图像配置文件。 在配置文件中,您可以定义各种屏幕大小并让Adobe Sensei完成其余步骤,以确保您的图像和视频始终针对查看者的设备而优化。
想要了解更多信息? 观看在AEM Assets Dynamic Media中使用智能裁切(6分钟35秒)和在视频中使用Dynamic Media智能裁切(6分钟22秒)。
改进SEO排名
业务案例: 配置Dynamic Media以获得改进的SEO排名。
请定期使用以下建议,以确保您的图像能够有效地帮助您制定整体SEO策略。
-
有意义的图像文件名:
使用反映图像内容的描述性文件名。 例如,- 使用
myCompany-Silver-Wrist-Watch - 避免
myCompany_Silver_Wrist_Watch或myCompanySilverWristWatch
这样做有助于搜索引擎了解图像上下文并改进SEO。 Google在文件名中首选使用连字符,而不是下划线或空格。 此外,请避免在文件名中连接单词。
- 使用
-
自定义域:
实施包含您的公司或品牌名称的自定义域,以增强品牌认知度和信任。 例如,- 使用
http://images.mycompany.com/is/image/companyname/ - 避免
https://s7d1.scene7.com/is/image/folder/AdobeStock_28563982
- 使用
-
SEO友好的文件夹结构:
以包含公司名称或品牌的文件夹结构组织图像,以便更好地编制索引,如http://images.mycompany.com/is/image/companyname/。 -
Dynamic Media规则集:
了解如何根据各种因素有条件地转换URL,从而增强SEO和用户体验。
想要了解更多信息? 转到使用规则集转换URL。 -
智能成像和智能裁切:
使用Dynamic Media中的智能成像和智能裁切功能来提供优化且响应式图像。 这样做不仅会缩短页面加载时间,还会对SEO排名产生积极影响。
想要了解更多信息? 转到智能成像,或观看在AEM Assets Dynamic Media中使用智能裁切(6分钟35秒)。
请记住,这些最佳实践与Google的图像SEO最佳实践高度一致。 此类实践强调通过适当的命名约定、结构化数据和优化的图像交付为搜索引擎提供上下文和清晰度的重要性。
想要了解更多信息? 转到Google的URL结构最佳实践和Google图像SEO最佳实践
使用命令动态增强图像并创建视觉效果
商业案例: 将丰富的视觉效果应用于图像。
Dynamic Media提供了一套用于增强图像和动态创建视觉效果的命令,而无需多个静态资产。 下面简要说明了其中一些流程,并提供了一些可指导您的示例:
源图像内的效果
- 首先,将原始图像上传到Dynamic Media。
- 确保已发布并通过URL访问。
- 在此示例中,具有白色背景的手表的库存图像(我们将其称为“图像X”)上传到Dynamic Media。
https://s7g2.scene7.com/is/image/genaibeta/watch-silver-offer
- 开发定义主题(要应用效果的区域)和背景(要更改的区域)的蒙版。
https://s7g2.scene7.com/is/image/genaibeta/watch-silver-offer-maskps - 蒙版通常是灰度图像,其中白色代表主题,黑色代表背景。 您可以使用Adobe Photoshop等工具创建蒙版。
想了解更多信息? 转到在Photoshop中创建和编辑快速蒙版。 - 对于“图像X”,请创建一个精确概述了要增强的主题的蒙版。 例如,人员、对象等。
在蒙版上后,使用URL命令应用外辉等效果,或将背景颜色更改为“图像X”。 以下是两个示例:
- 外辉光效果:
若要沿着主体的边界添加外辉光效果,请编辑以下URL:
https://s7g10.scene7.com/is/image/genaibeta/watch-silver-offer?mask=watch-silver-offer-maskps&maskUse=invert&effect=-1&pos=100,100&op_blur=75&op_grow=1&opac=25
在此URL中,op_blur、op_grow和opac参数将创建外辉光效果。 - 背景颜色更改:
要更改背景颜色,请使用具有不同背景颜色值的URL:
https://s7g10.scene7.com/is/image/genaibeta/watch-silver-offer?mask=watch-silver-offer-maskps&maskUse=invert&maskUse=invert&color=255,255,0
在此示例中,color=255,255,0将背景颜色设置为黄色。 将背景编辑为特定颜色以实现视觉效果。
添加图像边框
Dynamic Media允许您直接通过URL处理图像,使其成为创建动态数字体验的强大工具。 以下是一些示例。 让我们从以下原始图像URL开始: https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel。
https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel?size=400,400&extend=10,10,10,10
在此URL中,
extend=10,10,10,10参数指定所有边框10像素的边框大小。https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel?size=400,400&extend=10,10,10,10&effect=-1&op_blur=60&color=0,0,0
在此URL中,
effect=-1参数应用模糊效果,而op_blur=60控制模糊强度。https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel?size=400,400&extend=10,10,10,10&effect=-1&$shadow$&color=0,0,0
参数
$shadow$创建阴影效果,并且color=0,0,0将阴影颜色设置为黑色。欢迎尝试使用这些URL来实现所需的视觉效果。
创建图像叠加
如果您希望在现有图像上叠加徽标或图标,Dynamic Media可使用URL命令直接实现这一点。 我们来分几步吧。
例如,以下是基本映像:
https://s7g2.scene7.com/is/image/genaibeta/decorative-room-sofa。
下面是即将叠加的具有透明效果的星形对象的透明PNG图像:
https://s7g2.scene7.com/is/image/genaibeta/decorate-star
现在,创建一个Dynamic Media URL,以组合基本图像和徽标或图标图像。 可以使用URL命令达到此效果。
URL结构类似于:
https://s7g2.scene7.com/is/image/genaibeta/decorative-room-sofa?layer=1&src=decorate-star&scale=1.25&posN=0.33,-.25&fmt=png
资产所在的位置
hotspotRetailBaseImage是基本映像。starxp是徽标/图标图像。layer=1指定徽标或图标应叠加在基本图像上。scale=1.25调整徽标/图标的大小。posN=0.33,-.25确定徽标/图标相对于基本图像的位置。fmt=png确保输出为PNG格式。
了解更多信息? 请转到src以了解有关src命令和其他Dynamic Media URL命令的更多详细信息。
覆盖促销文本
以下是使用HTML和CSS在图像上叠加促销文本消息的步骤。
https://s7g2.scene7.com/is/image/genaibeta/leather-sofa
https://s7g10.scene7.com/is/image/genaibeta/leather-sofa?layer=1&posN=-0.3,-0.455&text=%7b\rtf1\ansi%7b\fonttbl%7b\f0+Arial;%7d%7d%7b\colortbl+\red255\green255\blue255;%7d\copyfit1000\vertalc\qc%7b\cf0\fs42+New+Collection%7d%7d&size=370,70&textAttr=130&bgcolor=FF3333&wid=600&hei=600
调整大小并裁切各种用例
图像大小调整基础知识
图像大小调整涉及改变图像的尺寸、分辨率和文件大小。 以下是需要考虑的一些要点:
- 像素合成:
数字图像由称为像素的小点组成。 创建图像时,图像具有特定数量的像素。 调整大小涉及添加或减去像素以更改图像的尺寸、分辨率和文件大小。 - 宽高比:
保持纵横比(宽度和高度的关系)对于防止扭曲至关重要。 无论您是要使图像变大(放大)还是变小(缩小),保留纵横比均可确保视觉一致性。 - 质量注意事项:
调整大小可能会影响图像质量。 避免急剧放大,因为它可能会导致像素化。 相反,请考虑以更大的大小和分辨率再现图像。 对于较小的图像,请使用适当的工具来保持分辨率。
裁切与调整大小
裁切和调整大小是Dynamic Media中的技术,这些技术允许您变换图像以适合各种用例,无论是在创建缩略图、产品显示图像还是横幅。
- 裁切:
涉及移除部分图像以改变其构成和框架。 它不会更改总体维度,但侧重于特定区域。 - 正在调整大小:
调整整个图像的尺寸、分辨率和文件大小,同时保持宽高比。
让我们探讨一个涉及以下起居室图像的用例:
- 原始客厅图像:
https://s7g2.scene7.com/is/image/genaibeta/decorative-room-sofa - 缩略图(200像素x 200像素):
适合快速加载或显示的较小版本。
https://s7g10.scene7.com/is/image/genaibeta/decorative-room-sofa?wid=200&hei=200&fit=crop - 带有裁切的缩略图(200像素x 200像素):
裁剪以专注于沙发区域。
https://s7g10.scene7.com/is/image/genaibeta/decorative-room-sofa?wid=200&hei=200&cropN=.24,.24,.6,.72&fit=crop - 产品显示图像(800像素x 600像素):
为了展示沙发而裁切和调整大小。
https://s7g10.scene7.com/is/image/genaibeta/decorative-room-sofa?wid=800&hei=600&cropN=.24,.24,.6,.72&fit=crop - 横幅(1720 px x 820 px):
从原始图像派生,强调房间。
https://s7g10.scene7.com/is/image/genaibeta/decorative-room-sofa?wid=1720&hei=820&cropN=0,.1,1,1&fit=crop
您可以随意探索这些变体,以满足您的特定需求。
想要了解有关URL中可用命令的更多信息? 转到命令引用。
投放GIF图像
商业案例: 使用Dynamic Media的GIF流
您可以通过Dynamic Media上传和投放GIF。 要渲染动画GIF,请在URL中将is/image替换为is/content。 例如,如果您已上传abc.gif,请使用以下内容:
-
此URL路径呈现GIF的静态视图:
code language-none https://your.domain.com/is/image/yourfolder/abc -
此URL路径将渲染GIF的动画视图:
code language-none https://your.domain.com/is/content/yourfolder/abc
is/content时,图像转换命令未应用于资源。为我的网站发布视频
商业案例: 快速发布营销网站的视频。
-
选择视频配置文件:
首先,在Dynamic Media中,您应该选择合适的视频配置文件。 您可以在视频配置文件下选择在AEM Assets中可用的 自适应视频编码 配置文件。 这些预定义的编码设置可确保您的视频在各种设备和带宽条件下均能优化播放。 或者,您也可以创建自己的自适应视频配置文件。 -
分配配置文件:
将所选视频配置文件分配给要将视频上传到的文件夹。 此步骤可确保在上传过程中应用正确的编码设置。 -
上传原始视频:
上传原始视频文件。 确保它是一个高分辨率的高质量视频。 源视频越好,最终结果越好。 -
预览和发布:
预览视频,以便确保一切按预期显示。 满意后,即可发布它。 此步骤使受众能够访问视频。 -
链接或嵌入:
发布后,您有两个选项。- 直接链接:
使用提供的URL直接链接到视频。 在营销网站上以适当的方式超链接它。 - 嵌入视频:
复制提供的嵌入代码并将其粘贴到您希望显示视频的网页的HTML中。 这样,视频就可以直接在您的网站上播放。
- 直接链接:
想要了解更多信息? 转到视频。
配置视频以获得最佳质量和参与
**商业论证:**设置视频以获得最佳质量和参与度。
要确保视频的最佳质量和参与度,请考虑实施以下最佳实践策略的组合:
-
使用内置的HTML5视频查看器:
Dynamic Media HTML5视频查看器预设是可靠的视频播放器。 使用它们可避免与HTML5视频播放和移动设备相关的常见问题。
这些预设可解决自适应比特率流交付和桌面浏览器访问受限等挑战。
想要了解更多信息? 转到最佳实践:使用HTML 5视频查看器。 -
使用Dynamic Media视频配置文件:
Dynamic Media中的视频配置文件可帮助实现高效的视频管理、一致的品质和自适应流式传输。
想要了解更多信息? 转到Dynamic Media视频配置文件。 -
遵循视频编码的最佳实践:
应用视频编码配置文件,在编码期间保持原始视频质量而不过度缩放。
想要了解更多信息? 转到视频编码最佳实践。 -
采用自适应流式传输而不是渐进式流式传输:
自适应流根据观看者的Internet连接速度和设备功能调整视频质量。
它使用HLS (HTTP Live Streaming)或DASH (Dynamic Adaptive Streaming over HTTP)之类的协议来确保最佳播放质量。
与线性交付视频的渐进式流不同,自适应流可最大程度地减少缓冲并提供无缝观看体验。
将视频国际化,以便使用多语言
业务案例: 使视频准备好供多语言使用。
多语言消费视频的国际化对于触及全球受众至关重要。 Dynamic Media提供的功能可帮助您实现这一目标。
-
上传您的视频:
- 首先,创建视频编码配置文件。 您可以使用Dynamic Media附带的预定义自适应视频编码配置文件或创建自己的自定义配置文件。
- 将视频处理配置文件与您上传主源视频的一个或多个文件夹关联。
- 将您的主源视频上传到这些文件夹。 Dynamic Media会根据分配的视频处理配置文件对它们进行编码。
- Dynamic Media主要支持最小分辨率大于25×25的短格式视频(最长为30分钟)。 每个视频文件最多可以上传15 GB1。
-
管理您的视频:
- 在AEM中整理、浏览和搜索视频资源。
- 预览和发布视频资源。
- 查看源视频及其编码的呈现版本以及关联的缩略图。
- 编辑视频属性,如标题、描述和标记2。
-
本地化:
- 对于每个目标地理/语言,创建音频轨道和字幕。
- 从AEM界面将这些音频和字幕轨道添加到您的视频中。
- 用户播放视频时,可以选择音频和字幕的首选语言。
-
正在发布:
- 如果您将AEM用作Web内容管理(WCM)系统,则可以直接将视频添加到网页。
- 如果您使用的是第三方WCM系统,则可以使用URL或嵌入代码在网页上链接或嵌入视频。
想要了解更多信息? 转到关于Dynamic Media中视频的多重字幕和音轨支持。
将资产交付给客户
优化图像大小并缩短页面加载时间
业务案例: 优化任何浏览器或屏幕的图像大小并减少页面加载时间。
Dynamic Media智能成像是一款功能强大的工具,通过基于客户端的浏览器功能自动优化图像的格式、大小和质量,来增强图像投放性能。
Adobe建议您使用智能成像的功能,而不是手动将图像格式设置为webp或avif。 原因如下:
- 浏览器兼容性:
智能成像可确保交付的图像格式与用户的浏览器兼容。 - 最佳压缩:
它根据特定的浏览器、网络条件和屏幕分辨率来选择最佳的压缩格式。 - 新式格式:
虽然avif是一种较新的格式,提供了更好的压缩,但并非所有浏览器都支持它。 - 最佳实践:
为确保获得最佳的Web优化格式,您可以信任智能成像进行格式选择,而不是使用命令fmt=webp或fmt=avif手动进行格式选择。
通过依赖智能成像,您可以确保以尽可能高效的方式提供图像,并根据每个用户的浏览环境量身定制。 此方法简化了流程,并且可以在图像加载时间和整体用户体验方面提高性能。
想要了解更多信息? 转到智能成像。
将资产过帐交付给客户
业务案例: 发布新内容或覆盖现有内容后,如何确保更改立即显示在CDN上?
CDN(内容分发网络)缓存Dynamic Media资产,以快速将其交付给客户。 更新这些资源后,所做的更改必须立即在网站上生效。 通过清除或使CDN缓存失效,可快速更新Dynamic Media交付的资产。 此方法无需根据TTL(生存时间)值(通常设置为10小时)等待缓存过期。 根据您的特定用例,您可以相应地更新CDN TTL(生存时间)设置。
想要了解更多信息? 转到通过Dynamic Media使CDN缓存失效。