这就是困境：
我正致力于使用“响应式设计”来制作我的网站。我的想法是，我想拥有一个在桌面上看起来不错并且可以在移动设备上使用的网站。布局是流动的：几乎所有尺寸都以百分比或ems表示。结果使我的网站几乎可以在iPhone上使用。一些@media查询使用备用布局，视口设置，我开始合理妥协。 （我不想维护一个单独的移动网站。）
在这样做的过程中，我发现的图像太大而无法使用。例如。宽度为33％的图像超过1兆字节。
指南问题1：在大多数桌面屏幕上，图像像素与屏幕像素的可接受比率是多少。
是的，计算机会动态调整大小。但是，调整200 x 300图像的大小以填充600 x 900点将看起来柔和，压缩质量为100.
指南问题2：在典型图像的压缩情况下，工件变得明显。
指南问题3：质量决策如何随着图像的视角增加而改变？最终的使用也需要考虑。横跨大部分页面的图像占据了视角的较大部分，并且会更加专注地看待。
现在这些是相互关联的。高度压缩的大图像将具有较小的伪像，并且在图像被下采样时将变得不那么明显。
所以我使用3个变量：图像使用，像素大小和压缩。
到目前为止：我的想法：
图像中的像素数多于网页上的最大预期用量。例如。如果我编写1200像素宽的浏览器窗口，900像素宽的内容窗口，以及800像素的最大使用图像大小，那么存储宽度超过800像素的图像是愚蠢的。我怀疑我可以远远超过这个。
75％的压缩质量是常见的，也是一个很好的起点，但我敢打赌，我可以稍微提高一点，几乎没有可检测到的差异。
占据屏幕主要部分的图像质量应该稍高。
我现在的办法是编写一个脚本来调整大小，并以各种比例重新压缩，看看有什么区别，但这是一个漫长的过程。在我开始之前，我希望其他人已经做过并公开他们的建议。这样我就有了一个起点。
答案 0 :(得分：0)
在寻求答案时注意到：
这里有很好的介绍其他格式的权衡和选项，以及一些工具链接。
http://www.html5rocks.com/en/tutorials/speed/img-compression/
如果您愿意在浏览器上运行JavaScript，则可以延迟图像加载; JS根据设备上的空间选择要加载的正确图像。这是我最终可能采用的一种好方法，但并没有直接解决我的权衡问题。