具有色彩渐变的图像的最佳图像格式？

Question

这不完全是一个编程问题，但我认为这是最好的问题。

我网站的首页有一个漂亮的横幅，其中超过一半的图像是颜色的“渐变”，还有一些文字。现在，要获得任何合理的质量文本，我必须将jpeg文件保存在＆gt; 90％的质量，需要106KB（不是太糟糕，但它在我的网站上增加了一些额外的负载，特别是我希望它快速登陆页面。）

现在，我想知道，如果有任何图像格式（如PNG / GIF），这些渐变可以以更加压缩的方式存储。如果是这样，我会要求我的设计师直接以该格式保存。问题是，从JPEG转换为PNG / GIF不是正确的方法，实际上增加了大小，因为“噪音”必须被编码。

图片：http://pollwidget.org/images/first_view.jpg

感谢

Answer 1

使用与您所拥有的图像一样大的图像，其中的颜色与您拥有的颜色一样多......根据您的质量参数，您不会比80-100K好多了。

我的建议是将图像分成至少两个组件 - 一个是背景渐变，一个是您拥有的UI视图。如果您在调色板上使用PNG / GIF和强制限制，通常可以通过这种方式获得一些好的节省。

但是，真的，你应该将文字与图像分开。这些文本不仅对搜索引擎不可读;您可以通过让浏览器处理文本呈现来节省大量空间。只需要一点点灵活性就可以使用的字体。如果您不喜欢默认的浏览器字体，请查看Google's Font directory。

Answer 2

如果你进行一些研究，你会发现JPG最好用于高质量的照片。 PNG8和GIF文件的工作方式类似，因为它们都支持256色，但GIF不支持＆＃34; alpha＆＃34;效果，即光滑的透明度或渐变。 PNG8以及PNG24甚至会更好。因此，PNG能够使其像素在一端变暗，而在另一端变为透明（alpha）。 GIF以不同的方式实现它。当我进入丝网印刷时，我学到了所有这些，所以我不确定它如何与图形设计一起工作。这是一个很好的链接，我发现它帮助我真正理解它。 JPG, PNG, GIF

Answer 3

在您的特定示例中，因为渐变只是单行像素的重复（它沿着水平维度变化，但沿垂直维度保持均匀/重复），我的建议是将其存储为图像（宽度） 955，身高1）并使用平铺填充屏幕。

然后，使用JasonAnderson的答案中提到的技巧来构建其他元素。