1

这不完全是一个编程问题,但我认为这是最好的提问地方。

我网站的首页有一个漂亮的横幅,其中一半以上的图像是一种颜色的“渐变”,还有一些文字。现在,为了获得任何合理质量的文本,我必须以 > 90% 的质量保存 jpeg 文件并占用 106KB(还不错,但它在我的网站上增加了一些额外的负载,特别是因为它的目标网页我希望它快)。

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

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

谢谢

4

3 回答 3

2

使用与您拥有的图像一样大的图像,其中包含与您拥有的图像一样多的颜色......考虑到您的质量参数,您不会比 80-100K 做得更好。

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

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

于 2011-04-09T17:57:56.153 回答
1

如果您进行一些研究,您会发现 JPG 最适合用于高质量的照片。PNG8 和 GIF 文件的工作方式类似,因为它们都支持 256 色,但 GIF 不支持“alpha”效果,即平滑的透明度或渐变。PNG8 会更好,而且 PNG24 会更好。所以PNG有能力让它的像素在一端是暗的,而在另一端是透明的(alpha)。GIF 以不同的方式实现它。当我进入丝网印刷时,我学到了这一切,所以我不确定它如何与平面设计一起使用。这是我发现的一个很好的链接,它帮助我真正理解了它。JPG、PNG、GIF

于 2015-10-22T02:28:47.947 回答
0

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

然后,使用 JasonAnderson 的回答中提到的技术来组合其他元素。

于 2013-11-09T04:43:15.577 回答