减少 html5 中重图像的加载时间答案

【问题标题】：Reduce loading time of heavy images in html5减少 html5 中重图像的加载时间
【发布时间】：2014-05-23 22:14:19
【问题描述】：

我正在尝试在网站中加载大量图片。我曾尝试使用 photoshop -> posterize 方法来减小重 png 的文件大小，然后使用一些在线工具来减小 png 文件大小，而不会严重影响图像的文件大小。我也尝试过预加载图像，但它们仍然需要相当长的时间来加载。

谁能建议我一些方法来减少网站上 png 图像的加载时间，以便它们快速加载？

非常感谢！

【问题讨论】：

标签： html png

【解决方案1】：

即使您遵循之前的所有/部分建议，您的工作流程的一个不错的插件是通过 PNGoptimizer 传递您的所有 PNG。

这是一个简单的拖放程序，可以从您的 PNG 文件中去除不必要的信息。根据图像类型，尺寸节省在 5-10% 到 70% 以上不等。

【讨论】：

【解决方案2】：

尝试使用 XHR 和一些服务器技巧进行预加载。或者使用webp 格式。

【讨论】：

【解决方案3】：

你的问题一定出在其他地方。

最多 79kb x 5 小于 1/2 a MB。这只会是慢速连接上的慢速负载。

我建议你安装 YSlow (http://developer.yahoo.com/yslow/)。它分析网页并根据一组高性能网页规则提出改进其性能的方法。

【讨论】：

【解决方案4】：

有一个很好的 JS 脚本来简化图像的预加载：https://github.com/jussi-kalliokoski/html5Preloader.js

另外请注意，对于繁重的网站来说，适当的缓存是必须的。谷歌为此做了一个很好的介绍：https://developers.google.com/speed/docs/best-practices/caching

为避免在您的网站上闪烁图像，请以较快的加载时间加载低分辨率图像，将它们拉伸到完整尺寸并在加载高分辨率图像时替换它们。为了改善光学效果，您还可以在低分辨率图像上放置一个网格。

这对访问者来说具有非常整洁的外观并减少了等待时间。

【讨论】：

【解决方案5】：

根据您拥有的服务器，我为所有 .net 站点使用图像生成。

<img src="/ImageGen.ashx?image=/images/an-image.png&amp;width=50&amp;height=50" width="50" height="56" alt="">

【讨论】：

【解决方案6】：

Photoshop 的色调分离对您没有帮助； PNG 不使用调色板（除非您选择 PNG-8）。您可以使用 File->Export for Web 导出较小的 PNG（或 gif）。如果您的图像包含 alpha 信息，但如果您导出到网络，它将丢失。 PNG-8 和 PNG-24 都具有索引透明度。

【讨论】：

【解决方案7】：

@ShrutiJakhete 您可以在 HTML5 中使用延迟加载 Jquery。在您向下滚动页面之前，视口之外的图像将不可见。因此它将减少加载时间。看看这个http://www.appelsiini.net/projects/lazyload

【讨论】：