图像的尺寸，分辨率和质量建议

Question

我正在寻找关于网页图像分辨率，大小和质量的好文章，特别是关于它如何影响当前的网站。

我正在为一个客户工作的网站，作为艺术和设计的荣誉毕业生，客户坚持认为她的7mb - 10mb图像足以用于她的网站，总计近400mb。我已经尝试过争论带宽限制和性能，但这些并没有坚持下去。

图像标准为72dpi，不大于标准屏幕分辨率（1024x768），大小超过1mb（我认为已经太大了）。我的论点是，在页面加载时将7mb +文件加载到图库中会严重影响用户体验，如果他们必须等待很长一段时间才能在页面加载之前首先将7-10张图像流式传输到缓存中，甚至测试这个使用延迟加载插件（我们不想闪存），后期加载有性能损失。

这里有人对图像大小，分辨率和质量有任何建议吗？当用户浏览图库时，我们不想放弃图像的高清质量（显然我们必须先将它们缩略图）？

Answer 1

如果你真的把它煮熟了，你就没有选择。

您所说的巨大文件大小并不现实。

您需要下载较小的版本。之后，您可以随后下载质量更高的版本，或者通过onmouseover或点击提供完整的图像。

Answer 2

一些一般性指导原则：

• 缩略图（当然）

• 提供多种图像尺寸（小，中，大）。虽然我理解巨型图像对用户界面的影响，但有些人做有快速连接和大型显示器和/或愿意等待高分辨率版本。 但它不应该是唯一的选择。

• 尝试不同的压缩级别，以查看哪种效果最适合不同尺寸。全面使用一个压缩级别并不总是有效。同样（取决于源材料），可能需要在高端进行近无损压缩。例如，用于打印的图像，具有精细细节的CAD绘图等

• 如果适用，请使用顺序加载技术。例如，如果您要加载十个图像（优化与否），请确保第一个可见图像是服务器实际请求的第一个图像。

Answer 3

我之前已经阅读了指南（当我们仍然使用1Mbps连接或更少时）并且一直遵循这些指南：

• 高分辨率图像不应大于1.5 - 2MB。使它变得如此之大就像网页内容本身一样大。尝试检查http://deviantart.com他们如何在他们的网站上放置大照片，并使用EXIF检查图像属性（如果有的话）
• 尺寸应足以在浏览器中查看（并避免滚动）
• 要测试压缩。这是一个案例基础，没有任何设置对每个人都一样。高质量，高压缩，没有明显的质量损失是网页设计的一种做法。
• JPEG最适合图像，PNG适用于布局，GIF适用于图标。
• 尝试使用javascript在浏览器空闲时在后台加载图片。这样，在用户知道之前，它们就在缓存中。
• 更多关于网页设计，避免在网站上使用繁重的图片，使网站快速，所以我们只等待图像。

Answer 4

当涉及到它时，您的客户的印象是要求缩小她的图像代表“妥协”，只会导致损害用户收到的图像质量。

事实上，8-10MB的图像非常庞大，大多数用户需要花费数秒才能下载，从而产生可怕的用户体验，从而提高跳出率。

向您的客户展示她的网站的并排演示，加载一些网络优化的图片，并向她展示一个加载8-10MB图片的网站，然后由她决定。最终，你作为专业人士的工作是帮助她做出好的选择，但如果她坚持下去，她可以自由地做出坏事（这是她的品牌，金钱和权利）。

如果用户在超高分辨率显示器上或者窗口看起来特别大，那么你可以做的其他事情就是检测窗口的大小并加载更大的图像。

祝你好运！