循环 HTML5 背景的最佳文件大小是多少？

Posted 2023-03-07

【中文标题】循环 HTML5 背景的最佳文件大小是多少？

【英文标题】：What's the optimal file size for a looping HTML5 background?

【发布时间】：2015-07-25 10:44:58

【问题描述】：

我的研究：

我能找到的唯一相关问题是 JWPlayer 特有的。我的问题不是 JWPlayer 特有的：

Optimal file size for a html5 background video stream with JWPlayer?

搜索引擎结果似乎也没有产生指南。

我的问题：

在回答没有最佳选择，世界太美，变化多端，让人无法理解答案之前，请记住，我的问题是基于平均或最常见的互联网连接。

换句话说，如果我想覆盖大多数互联网用户，而又不会遇到严重的负载/性能问题，我的最大文件大小限制应该是多少？

【问题讨论】：

根据平均道路质量，汽车应该开多快？

@connexo 在这里试试：engineering.stackexchange.com :-P 比较 this search engine result 和 this search engine result。考虑到前者的指标比后者更可知，他们是不同的查询。除此之外，我理解你的观点，尽管你似乎忽略了我的问题第四段中概述的我的观点。克里斯蒂安·希尔兹（Christian Shields）已设法根据现有知识尽其所能做出有根据的回应（如下）。

【参考方案1】：

根据Akami 2014 internet speed ratings，世界平均互联网速度为 3.9Mbps（即每秒约 500KB 或半兆字节）。但是，我强烈建议不要以平均水平为目标，而是以低于平均水平为目标进行优化，以便更多人在您的网站上获得愉快的体验。我建议针对大约 1.5Mbps（约 185KB/秒）的速度进行优化。这意味着如果您希望您的页面在 1.5Mb 的慢速连接上在合理的 10 秒内加载，未缓存（有人第一次访问您的网站时，它会随着图像的缓存而加速）您的总页面应该小于 2MB。所以你必须问自己，你愿意在背景图像上使用多少 2MB？我建议将背景图像设置为 150-300Kb 左右。使用 Photoshop 之类的程序和“发布到 Web”功能来使用您的背景图像设置和文件类型，以将其大小更改为您想要的大小。我建议避免使用 Jpeg 并以 PNG 为目标。

【讨论】：

感谢您分享您的知识。我有一个 30 秒的 6MB 视频作为 HTML5 视频背景。基于 1.5mps，视频加载时间在第一次加载时需要 4 秒。这显然超出了您的 2MB 指导方针 :-( 也许压缩是要走的路。

实际上，6MB（兆字节等于 48Mb（兆位），因此在 1.5Mbps 连接上加载大约需要 32 秒。

哦，哇。这是实质性的。感谢您的指正。我正在使用 Revolution Slider 作为视频背景，因此我需要使用第一个场景的占位符图像检查页面是否可以在视频加载之前继续加载。