我正在寻找关于网络页面上的图像分辨率、大小和质量的好文章，特别是关于这些如何影响当前的网站。我正在为客户制作网站，作为艺术和设计的荣誉毕业生，客户坚持她的7mb-10mb图像对于她的网站已经足够了，总计近400mb。虽然我试图通过带宽限制和性能来争辩，但这些都没有站住脚跟。图像的标准分辨率为72dpi，不超过标准屏幕分辨率（1024x768），大小不超过1mb（在我看来已经太大了）。我的观点是，在页面加载时将7mb+文件加载到相册中，如果用户必须等待长时间才能将7-10张图像首先流入缓存，那么这将严重妨碍用户体验，即使使用懒加载插件进行测试（我们不想使用flash）和延迟加载也会有性能损失。这里有人对图像大小、分辨率和质量有任何建议吗？我们不想在用户浏览画廊时失去高清晰度的图像（显然，我们必须先生成缩略图）。
图像的尺寸、分辨率和质量推荐
5
- JadedEric
2
你研究过Photoshop中的“保存为Web”功能吗？在jpg格式下使用80％质量的“保存为Web”通常会给您带来良好的结果。如果整个网页大于1.5 MB，则会出现性能问题。我怀疑有些人会说它不应超过0.5 MB。 - Scott Simpson
只有大品牌的网站才有使用巨大图片的特权，因为他们可以。这里存在可用性问题，网站应该是清晰的（当然还要美观），因为它们的目标是传达信息。我建议你与客户进行沟通。作为专业人士，你知道什么是正确的。关于原因，你可以在http://ux.stackexchange.com/上询问。 - Yisela
4个回答
2
我之前已经阅读过指南（当时我们还使用1Mbps或更慢的连接），并一直遵循以下规则：
- 高分辨率图片不应超过1.5-2MB。这样做就会比网页内容本身还大。可以查看http://deviantart.com，了解他们是如何在网站上展示大照片，并查看是否有EXIF图像属性。
- 尺寸应足够在浏览器中可见（避免滚动）。
- 需要测试压缩。这是个案例抉择，没有一个设置适用于所有人。高质量、高压缩而视觉上看不出品质损失是Web设计的一种实践。
- JPEG最适合图像，PNG适合布局，GIF适合图标。
- 可以使用JavaScript在浏览器空闲时将图片加载到后台。这样，在用户知道之前，它们就被缓存了。
- 关于网页设计，避免在网站本身使用重量级图形，以使网站快速，只需等待图像即可。
- Joseph
1
如果真的深入分析，你没有选择。
你说的是巨大的文件大小，这是不现实的。
你需要下载一个较小的版本。之后，你可以随后下载质量更高的版本或通过onmouseover或click提供完整的图像。
- user875234
1
一些通用指南：
缩略图（当然）
提供多种图像尺寸（小、中、大）。虽然我理解巨大图像的UX影响，但有些人确实拥有快速连接和大屏幕，并且/或愿意等待高分辨率版本。但这不应该是唯一的选择。
尝试不同的压缩级别，以查看适用于不同大小的最佳效果。在所有情况下使用一个压缩级别并不总是有效的。同样地（取决于源材料），在高端可能需要近乎无损的压缩。例如，用于打印的图像、CAD图纸具有细节等。
如果适用，使用顺序加载技术。例如，如果您要加载十个图像（经过优化或未经优化），请确保第一个可见的图像是实际从服务器请求的第一个图像。
- Tim M.
1
说到底，你的客户认为要求缩小她的图像代表了一种“妥协”，只会损害用户接收到的图像质量。
事实上，一个8-10MB的图像是如此之大，以至于大多数用户需要花费很多秒钟才能下载，这会导致可怕的用户体验，从而增加跳出率。
向你的客户展示一个网站加载一些经过优化的网络图片和另一个加载8-10MB的图片的并排演示，然后让她决定。最终，作为专业人士，你的工作是帮助她做出正确的选择，但如果她坚持要做出错误的选择（这是她的品牌、金钱和权利），那么她可以自由选择。
你还可以尝试检测窗口的大小，并在用户使用超高分辨率显示器或窗口特别大时加载更大的图像。
祝你好运！
- sscirrus
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接