我有一个包含许多大流体图像的页面。 http://altarjewelry.com/gallery
我想在滚动时获得平滑的60fps webapp感觉。 Chrome DevTools告诉我我的绘画时间是最大的问题（滚动时你可以自己检查）。我假设这是由于我的许多大流体图像。
我已阅读HTML5Rocks上有关性能的所有文章。我发现了许多关于JS性能的好技巧，但没有帮助优化大图像绘制时间，除了使用小的固定大小的图像，这对我来说不是一个选项，因为我正在建立一个响应式网站。
我已根据客户端提供响应式图像。
感谢您的帮助。
答案 0 :(得分：1)
不确定您的图库的外观，因为它从未从您帖子中的网址加载，而且我不知道这是一个javascript问题还是什么 - 但我会采取刺伤帮助你想出一个解决方案。无论您是否正在构建响应式网站，图像优化都是图像优化。
对于每个项目，你真的需要一个大的，高分辨率的图像，在相同的DPI / PPI和压缩下，应该有响应吗？
或者，您是否应该在不同的DPI / PPI和压缩下为不同的显示器提供适当大小的图像，所有这些仍然在响应式应用程序中使用？
您正在展示图库，通常情况下，您需要较小的实际图像表示 - 缩略图或占位符，通常分辨率较低，以较高的分辨率链接到实际图像。这是一种公认的设计方法，如果您要改变它，请确保它有充分的理由。
如果您正在构建自适应网站，则某些用户显然会使用可能具有320像素宽的分辨率的移动设备。考虑这样的事情，并且这样：即使有人出现在桌面上，你是否会加载巨大的全宽图像？他们将永远加载，访客永远不会看到你的画廊。您的画廊如何在宽屏幕桌面上观看？如果您的目的是在整个页面上放置一个全宽的图片，并加载相同的图片而不管设备访问您的网站，您可能会使用自适应设计，但您会发现它远离最佳甚至是良好的实践。
为什么不在桌面上放置四个图库？或者更多？如果是这样的话，他们在任何情况下都可能具有最大尺寸。老实说，我不知道，因为我试图加载你的网站几次，什么也得不到。但请注意，如果初始显示中的图库图像的最大尺寸实际上是最大尺寸，则说明每个像素最大200像素的200个像素的6个图像（或者，您使用的是基于％的框架并使用100％的显示宽度？即使响应式网站通常会限制内容区域的最大宽度，这些都有助于确定更合适的答案）解决方案开始出现。
由于在这种情况下图像不需要大于200像素，并且在您的列可能只显示一个您想要全宽的图像的手机上，您可以使用最大初始宽度为480像素的宽图像。 / p>
我们假设您希望它们具有高品质。没关系。您仍然需要减小文件大小，并通过压缩来实现。现在，您可能会觉得将照片压缩到50％甚至更多会使其变得模糊，并且它肯定会以低ppi（每英寸像素数）设置。
您需要做的是将默认图像编辑器设置从72或90 ppi等传统默认设置更改，并将其调整为300,400,500或更多 - 然后应用压缩。如果该图像宽度为480px，并且您只有72ppi，则压缩会迅速侵蚀质量。但是，每英寸有几百个额外像素将允许存储更多信息。然后，您可以应用更高的压缩率，并将文件大小缩小很多。
超大图像方法
另一个技巧是做同样的事情，并略微超大图像。如果480px是缩略图/小图片的最大尺寸，请将它们实际设置为540-600像素宽，400-500ppi，并以非常高的设置压缩它们。浏览器将调整为最大宽度480像素...但是那时你的性能会受到影响。一切都是权衡。您也可以模糊图像中的背景，允许照片的前景/主焦点具有更高的质量，而背景需要更少的信息，从而产生更小的文件大小。
不适合批量处理
这应该针对每个图像单独进行，批量编辑通常不会充分利用这种技术，因为每张照片中的颜色信息都是如此不同。一张照片可能是最佳质量和最小尺寸，适用于300ppi和50％质量，另一张500ppi和35％质量。您不仅要为您的图库缩略图而且要为多个图像执行此操作。没有必要为那些使用480px宽/分辨率显示器浏览您网站的人提供1400px宽的全尺寸桌面。使用媒体查询来提供适当的球场大小的图像，并具有小型，中型和大型变体。做得好，你甚至不需要为那些用手机浏览的人提供更大的图像...他们正在查看的图库图像已经足够了。
压缩设置并不是最终图像质量的重要因素，因为您必须压缩的像素数量会增加。使用的像素越多，压缩设置越高，质量越好。
另外，请考虑您的图库的流程/设计。你有20件物品吗？ 100？ 400？你想在一个页面上展示它们吗？将其分解为少量...每页12-20。较小和较少的图像将加载更快，并且可以保持响应，为需要更高或更高质量图像的人提供链接。无需向使用手机浏览的人显示巨大的高质量图像。
预取和加载
服务器端脚本，甚至一些javascript解决方案可以帮助解决这个问题。您可以执行诸如将每个图库页面限制为四行四个图像之类的操作，然后在页面加载之后，使用javascript预取将显示在第2页上的前四个图像。如果您的访问者在滚动浏览后转到第二页第一页，前四个图像被加载到缓存中，并在其他图像正常加载时快速显示，从而提供更快页面加载的体验。
如果访问者访问网站中的其他页面，则您不会在12张图片上浪费带宽，只会花费4倍的带宽。智能设计可能是使用网站上其他地方的第二页上的前四个图像...因此，第一个图库页面访问实际上加快了其他地方的页面加载，实际上并没有为加载4个不必要的图像而放弃带宽。想一想这个过程，解决方案就会建议自己。
无论如何，这里有相关的文章/帖子/链接，你可能会发现有助于理解所有这些：
压缩图像是高分辨率显示器的理想解决方案吗？
http://www.vanseodesign.com/web-design/compressive-image-tests/
缩小图像尺寸（ResponsiveDesign.is）
https://responsivedesign.is/articles/reducing-image-sizes
在这篇文章中搜索benfrain dot com：
如何为视网膜显示器提供高分辨率网站图像
您可能会觉得有用的工具......
adaptive-image dot com