这不完全是一个编程问题，但我认为这是最好的提问。
我网站的首页有一个漂亮的横幅，其中一半以上的图像是一种颜色的“渐变”，还有一些文字。现在，为了获得任何合理质量的文本，我必须以 > 90% 的质量保存 jpeg 文件并占用 106KB（还不错，但它在我的网站上增加了一些额外的负载，特别是因为它的目标网页我希望它快)。
现在，我想知道，是否有任何图像格式（如 PNG/GIF）可以以更压缩的方式存储此类渐变。如果是这样，我会要求我的设计师直接以该格式保存。问题是，从 JPEG 转换为 PNG/GIF 不是正确的方法，实际上会增加大小，因为必须对“噪声”进行无损编码。
图片：http://pollwidget.org/images/first_view.jpg
谢谢
【问题讨论】：
标签： image compression gradient image-formats image-compression
如果图像与您拥有的图像一样大，其中的颜色与您拥有的图像一样多……考虑到您的质量参数，您不会比 80-100K 做得好很多。
我的建议是将图像分成至少两个组件 - 一个是背景渐变，一个是您拥有的 UI 视图。如果您使用 PNG/GIF 并强制限制调色板，通常可以通过这种方式节省一些费用。
实际上，您应该将文本与图像分开。不仅文本对搜索引擎不可读；您可以通过让浏览器处理文本呈现来节省大量空间。您可以使用的字体只需要一点灵活性。如果您不喜欢默认浏览器字体，请查看Google's Font directory。
【讨论】：
如果您进行一些研究，您会发现 JPG 最适合用于制作高质量的照片。 PNG8 和 GIF 文件的工作方式类似，因为它们都支持 256 色，但 GIF 不支持“alpha”效果，即平滑的透明度或渐变。 PNG8 会更好，而且 PNG24 会更好。所以PNG有能力让它的像素在一端是暗的，而在另一端是透明的（alpha）。 GIF 以不同的方式实现它。当我进入丝网印刷时，我学到了这一切，所以我不确定它如何与平面设计一起使用。这是我发现的一个很好的链接，它帮助我真正理解了它。 JPG, PNG, GIF
【讨论】：
在您的特定示例中，因为渐变只是单行像素的重复（它沿水平维度变化，但沿垂直维度保持均匀/重复），我的建议是将其存储为图像（宽度955，高度 1) 并使用平铺填充屏幕。
然后，使用 JasonAnderson 的回答中提到的技术来组合其他元素。
【讨论】：