如何在不引入伪影的情况下将.png模糊的背景转换为压缩的.jpg？

我目前正在处理网站背景图片的图片质量问题。

我有一个较大的模糊背景图片，我想使用它，但希望它的尺寸​​尽可能小。

要使其具有最高质量（png），大约200kb。

我可以将其压缩为JPG的大约100kb，但是质量会降低，这是可以预期的，但是线性周围有可怕的线条使它看起来很糟糕。

有没有一种特殊的方法可以将此png转换为jpg，但又可以防止图像出现这些缺陷？

这是图像：

PNG：

JPG（100％）品质：

JPEG不是无损压缩

JPEG压缩被认为是有损压缩，即使将其设置为100％质量也会损失一些质量。这就是为什么对于简单图形（例如UI界面和背景）通常最好使用无损格式（例如PNG）的原因。

200kb在2014/2015年并不算大

尽管尽可能减小背景大小是很重要的，但重要的是要注意200kb对于大多数宽带连接而言并不大。您可以使用CSS媒体查询为手机和平板电脑提供其他版本。

使png文件更小

Photoshop和其他绘画包使用标准PNG压缩，您必须使用PngOptimizer或Yahoo的在线服务Smush It可以将200kb压缩到甚至更少。减小文件大小甚至不会降低质量，因为它是一种无损格式...它从根本上优化了代码，进一步减小了文件大小，将其与ZIP或RAR文件进行比较，这些压缩文件不会降低内容的质量。

考虑使用条纹渐变

另一个可能的解决方案是，您使用一个宽1px的PNG渐变色，然后是页面的高度，然后使用复制它background-repeat，甚至可以考虑使用CSS 为您生成Gradient，但是当然，能够使用阴影和其他调整。

这可能无法回答您的问题。一些可能的替代方案...

您是否考虑过CSS：

background: linear-gradient(45deg, #3d667c, #1d283e);

或者，您可以使用SVG base64技术（此处为生成器工具）：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g932" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="#3D667C" offset="0"/><stop stop-color="#1D283E" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g932)" /></svg>

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNENjY3QyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFEMjgzRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkzMikiIC8+Cjwvc3ZnPg==);

您是否尝试过使用更小的 PNG并允许浏览器的本机放大算法对其进行放大？这样可以减小文件大小并消除JPG伪像。

我建议您查看Kraken.io，他们有一个图像优化器。您主题中的图像尺寸缩小了45％，肉眼看不到！

您也可以只使用CSS，colorzilla有一个不错的工具可以为所有浏览器创建正确的CSS。

如果您对渐变图像不满意，请降低颜色，使其变为黑白，然后为div / body / element设置背景，如下所示：

background: blue url('images/gradient.png')

一些图像编辑器（例如GIMP）允许您在保存jpeg时应用平滑以及控制压缩。

平滑：将平滑选项设置为非零值将使图像稍微平滑。这减少了压缩产生的模糊伪像，并有助于压缩。设置为0.10-0.15会消除大部分伪像，而不会弄脏边缘。

http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG

您还可以通过控制子采样来减少伪像

尽管标准的二次采样通常足以满足大多数图像的需要，并且可以在图像质量和文件大小之间提供良好的比率，但是在某些情况下，不使用二次采样（4：4：4）可以显着提高图像质量，即使您使用较高的压缩率以保持文件大小。最明显的情况是图像中包含一些具有精细细节的部分，例如均匀背景上的文本，以及图像中几乎是纯色的图像。

http://www.ampsoft.net/webdesign-l/jpeg-compression.html

尝试添加噪声以最小化条纹：

Photoshop：

1. 创建新层。
2. 转到：Image > Fill... >并使用以下值：

3. 将图层的混合模式更改为叠加
4. 前往：Filter > Noise > Add Noise... >。这些价值观对我来说很有效：

5. 根据您的喜好调整图层的不透明度。22％的还可以，因此生成的JPG为：

因此，没有讨厌的条带，更小的尺寸，但是以噪音为代价。与非嘈杂版本（大约100kb）相比，文件也要重得多，但只有原始PNG的一半。实际上，我对您的PNG这么大感到惊讶。

另一个建议：

如果不想增加噪音，请尝试确保在sRGB色彩空间中的任何地方工作，从而为监视器屏幕提供最丰富的色域（较少的条纹）。