在网页上使用高分辨率图像的最佳做法是什么？

Question

我想在我的个人网页上加入一些高分辨率的图像，并对目前的做法感到好奇，以确保最佳的用户体验。我知道一些做法，比如使用CDN有助于缩短加载时间，但是如何确保所有浏览器的最高质量观看体验，css微调等等？我对提供单个静态背景图像感到很好奇。

Answer 1

文件越小越好。您希望通过将图像放在CDN上或至少在单独的（子）域上尽可能快地提供图像，但如果您已经优化了内容交付，那么最终瓶颈通常是用户的连接。较小的文件转换为更快，响应更快的加载时间。

就背景图像而言，我们是在谈论一个大图像还是平铺一个较小的图像？无论哪种方式，尝试使图像大小尽可能小，同时保持所需的图像质量。大多数图像创建/操作软件都有工具，可以让您优化图像以进行网络传送。

您还应该通过使用适合移动设备的响应式设计来考虑移动设备，并且可能（取决于您网站的设计）使用不同的小图像为您的小屏幕风格。

Answer 2

您可以做的第一件事是压缩文件，以便在减小文件大小的同时保留质量和分辨率。使用上述CDN将有很大帮助。

对于静态背景图像，我个人也会选择隔行渲染而不是progressive rendering，因为它在较慢的连接上视觉上更好。

此外，您可以根据用户分辨率加载不同的较小图像，这将确保所有用户（尤其是移动平台上的用户）获得良好的结果。