HTML 大图像性能问题

HTML large image performance problems

本文关键字：问题 性能 图像 HTML      更新时间：2023-09-26

我正在尝试制作这样的病态滑块 http://learnlakenona.com/

但是我在 chrome 中遇到了重大的性能问题（似乎他们的网站甚至没有在 chrome 上运行滑块）。我通过在div 上使用背景图像 CSS 来显示图像，将它们添加为 img 标签会导致更多的延迟。

我

禁用了所有javascript，并注意到我仍然因为有一些巨大的图像彼此重叠而感到滞后。

这里只是一些坐在那里的图像。尝试更改面板的大小，重绘图像会将其锁定。（有时它运行正常一点，这很奇怪）http://jsfiddle.net/LRynj/2/

有没有人知道我如何在这样的滑块上获得可接受的性能！？（图像需要很大）

通过在图像编辑器中调整图像资源的大小或降低质量来优化图像资源。

您还可以在线使用免费工具：

http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/

该网站使用巨大的透明PNG来实现视差效果，因此：

  • 您必须减少图像的总重量：如果尚未将这些PNG转换为PNG-8，则可以尝试将其转换为PNG-8。量化算法等在将图像减少到 256 种颜色方面做得很好，而不会降低太多质量。
  • 你必须保持视差效果的透明度。这两种类型的透明度都与 PNG-8 兼容：每个像素上类似 GIF 的不透明/传输位透明度和类似"PNG-32"（PNG-24 + 8 位透明度），其中每个像素具有 256 个透明度级别。Adobe Fireworks特别擅长创建这样的"PNG-8 + alpha"图像;转换器也存在，但它们并不完美（取决于您的图像）。
    • 加载
  • 图像中立即看到的最小部分，然后才加载9600像素宽（！）的其余部分，这将大大减少首次查看的时间。您可以通过按 1920 或 2560px 的块对图像进行切片、将 3 张图像的查看部分加载为背景图像并通过仅在 DOM 准备好加载所有其他部分后执行的脚本来实现这一点。没有太多的部分，因为这意味着需要下载更多的资产，但仍然不是 4MB 的精灵:)奖励：通过将 3 张图像切成 PNG-8，每个 PNG 将拥有自己的 256 调色板，整体质量会更好（不如 PNG-24 完美，但比单个 9600px PNG-8 更好，总共只能使用 256 种颜色。一个PNG中的男士西装有更多的灰色阴影，球棒分子的颜色更闪亮，等等

编辑：永远不要尝试将其加载到智能手机上！我确实喜欢媒体查询并避免 UA 检测，因为大多数时候都不需要它，而且永远不会完美，但这是欢迎它的情况之一（选择加载 8MB 的图像）......忽略没有光纤且不会等待您的网站显示的用户是与您的问题无关的另一个问题。

相关文章：