HTML5 广告素材通常是指使用 HTML、CSS 和 JavaScript 制作的广告。您可以通过多种方式压缩 HTML5 广告素材文件。下文提供的许多提示都可以在 15 分钟内实施。
使用 Google Web Designer
Google Web Designer 是一款用于制作 HTML5 广告素材的 Web 应用，且已与 Studio 和素材资源库无缝集成。此外，Google Web Designer 既内置了针对图片和代码的压缩功能，也支持 Google 网页字体、SVG 以及 CSS 动画等。
检查文件大小
在缩减文件大小之前，请检查当前文件大小并阅读以下指南和条款。
原始文件大小与压缩文件大小
查看原始文件大小：
- 在 Studio 中，您可以通过 Studio 广告素材工作流程的管理文件步骤查看文件总大小。
- 在 Google Web Designer 中，依次点击发布 > 本地发布，即可在“发布”对话框中查看总大小（原始）。您还可以在广告验证工具面板中查看当前文件大小。
Google Web Designer 使用免费软件 gzip 压缩广告素材。如果您没有使用 Google Web Designer，可以下载 gzip 的免费副本，并使用它在本地工作区压缩广告素材，然后查看文件大小。
文件大小基准
在制作广告素材之前，请务必了解发布商的广告投放规范。不过，许多发布商都遵循 IAB 推荐的大小，即广告素材的初始加载大小不超过 200 KB（压缩后），广告素材总大小不超过 300 KB 或 500 KB（具体取决于广告素材格式）。初始加载大小是指投放到浏览器以用于初次广告展示的所有广告素材资源压缩后的总文件大小，其中包括所有文件 - 图片、HTML、CSS 和 JavaScript。
启动器文件大小
启动器必须包含在 Studio 广告素材中，但网络浏览器会保留缓存副本，因为系统会为每个 Studio 广告素材加载相同的脚本。启动器脚本的大小为 25 KB（压缩后）和 75 KB（原始）。
如需了解更多详情，请参阅 IAB 和 Studio 发布的指南：
- IAB 的 HTML5 指南（采用 .PDF 格式，请参见第 4 页和第 6 页）
- Studio 发布的广告素材指南
关于 Chrome 的重型广告干预功能
- 如果您的广告素材包含大量图片、视频、动画或 3D 对象，请按照 Chrome 指南测试该广告素材，并确保它不会被取消加载。
- 参考 Chrome 重型广告干预功能演示测试您的广告素材，看看它是否会被禁止投放。
礼让加载和发布商规范
礼让加载是指将其他广告素材资源（如图片和视频）延迟到发布商网页加载完毕后再加载。礼让加载与初始加载大小不同，后者指的是投放到浏览器以用于初次广告展示的所有广告素材资源压缩后的总文件大小。有些发布商会要求使用礼让加载，不过即使没有这样的要求，我们也建议您使用此功能。了解如何设置礼让加载
请查看发布商的 Rich Media HTML5 规范。发布商可能会根据压缩后的 gzip 格式来计算文件大小，也可能倾向于计算原始文件大小。具体的发布商规范可能与 IAB 发布的规范不同，具体取决于展示位置、广告类型等。某些发布商可能会更愿意在广告素材制作规范方面做出让步。另请注意动画或视频播放时间方面的各种限制。
缩减图片大小
在您尝试缩减图片大小之前，请先考虑相应图片是否有存在的必要。有些图片元素可用 CSS 样式来替代。您可以参考和利用下文中提供的建议和资源，来减少广告素材中图片的数量并优化所需的图片。
使用 CSS 制作渐变效果或纯色效果GIF、JPG 和 PNG 图片均基于像素（“光栅”），而且都比较大；而 SVG 是基于点到点的图形（“矢量”），因此可显著缩减文件大小。
详细了解 SVG
W3School 的 SVG 教程
如何使用 SVG
压缩 SVG
图标字体是常规字体，其用法与标准字体一样。它们通常基于矢量，因此有助于缩减文件大小。如果您要反复使用相同的图标，请构建您自己的图标字体。
图标字体资源
Icomoon 图标字体创建工具
NounProject CSS 图标
FontAwesome CSS 图标
雪碧图是指加载一次的单张平铺图片。当您使用 CSS 时，系统仅会展示整体图片的各种平铺效果。使用雪碧图可减少 HTTP 请求数量。HTTP 请求数量越少，广告素材的加载速度就越快。找到适合雪碧图的正确压缩方式仍然非常重要。
如果需要使用基于像素的图片，请在不影响质量的前提下尽可能对其进行压缩。您可能比较熟悉 Photoshop 的“Save For Web”（保存为网页所用格式）功能，不过还有一些其他在线工具也提供高级压缩功能。
利用 CSS 制作动画效果
您不妨考虑使用 CSS3 动画（而非 JavaScript）进行过渡和转换。CSS 转换会使用 GPU（图形处理器）而非 CPU（中央处理器）呈现动画，这种做法可提升效果并缩减 JavaScript 文件大小。
若要制作更复杂的动画（包括粒子动画），您不妨考虑使用 GreenSock 的 JavaScript 动画库 (GSAP)。GreenSock 可以简化 CSS 动画比较棘手的方面，比如调整多个动画的时间，以及独立实现转换属性动画效果。
请不要使用那些通过 JavaScript 的 setInterval 方法实现动画的 JavaScript 库或框架，也不要在手动编码时使用 setInterval 方法。setInterval 会占用大量浏览器资源，影响效果并且需要更多代码。如果必须使用 JavaScript 动画，您不妨考虑使用专为动画设计的 requestAnimationFrame 方法。
了解如何优化动画效果
使用 requestAnimationFrame
CSS 动画与 JavaScript 动画
在将您的 CSS 文件上传到 Studio 之前，请先使用 CSS Minifier 缩减 CSS 文件大小。
缩减 JavaScript 文件大小
下面是一些关于如何缩减 JavaScript 文件大小的提示：
不要使用 jQuery您可以将引用公共 JavaScript 库的网址替换为 Studio 托管的网址，而无需将 JavaScript 库随您的广告素材一起上传。您的实时广告将投放到托管这些库的同一网域。
Studio 将与 IAB 合作，使这些资源被多个广告素材共享和缓存，以免在初始加载广告时加载这些资源。
确定要将您的广告系列定位到哪些浏览器和设备，以节省时间和代码。请不要针对不受支持的浏览器或设备添加代码。这样做也能节省您在测试过程中花费的时间。
浏览器支持资源Studio 支持的浏览器和设备
Can I Use：JS 和 CSS 属性的最新浏览器支持
合并和压缩 JavaScript 文件
如果您有多个 JavaScript 文件，请将它们合并为一个文件。您可以使用能够从 JavaScript 文件中移除评论和多余空格的工具。
- 保留一个未压缩的副本，以便日后进行更新。
- Studio 要求 JavaScript 文件的扩展名必须为
.js，不能是.min.js。 - 压缩 JavaScript 文件后，将无法轻松添加跟踪参数。因此，请先添加跟踪参数，然后再压缩 JavaScript 文件。
优化字体
如果您使用的字体不是标准网页字体，不妨考虑使用 Google Fonts（一个大型免费字体库）。为了缩减文件大小，请务必只请求从字体中获取您所需的字符，不要请求整个字体。
不过，您还要考虑浏览器只会缓存绝对网址，这一点同样非常重要。尽管 http://fonts.googleapis.com/css?family=Philosopher&text=Hello 对于特定广告素材来说将是最小大小，但它仍会被视为来自 http://fonts.googleapis.com/css?family=Philosopher&subset=latin（可能已缓存在浏览记录中）的单独请求。请尽可能利用缓存来提高广告素材的加载速度。