How do I convert a .png blurred background into a compressed .jpg one without introducing artefacts?

Question

I'm currently dealing with a problem of image quality for my website background image.

I have a big blurred background image I'd like to use but would like it to be as small as possible in size for the website.

To have it in it's highest quality (png), it's about 200kb.

I can get it down to about 100kb as JPG but the quality is reduced which is expected but there are horrible looking lines around the linear that makes it look terrible.

Is there a way to special way of converting this png into a jpg but keep the image from having these defects?

Here are the images:

PNG:

JPG (100%) quality:

Answer 1

This probably doesn't answer your question. Some possible alternatives...

Have you considered CSS instead:

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

Or perhaps you could use the SVG base64 technique (generator tool here):

<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==);

Have you tried using an even smaller PNG and allowing the browser's native up-scaling algorithm to enlarge it? This might get the file size down as well as eliminate JPG artifacts.

Answer 2

JPEG is not a lossless compression

JPEG Compression is considered a lossy compression even when set at 100% quality you loss some quality. That's why for simple graphics such as UI interfaces and backgrounds is generally better to use a lossless format such as PNG.

200kb isn't that big in 2014/2015

While it would be idea to decrease the size of the background as much as possible its important to note that 200kb is not that big for most broadband connections. You could serve a different version for mobiles and tablets using css media queries.

Making a png file even smaller

Photoshop and other paint packages use standard PNG compression, you must likely can reduce that 200kb to even less using PngOptimizer or Yahoo's Online Service Smush It. Reducing the file size even lower will not lower the quality as its a lossless format... it basiclly optimises the code reducing it further, compare it to a ZIP or RAR file, these compress files but do not reduce quality of the content.

Considering using a stripe gradient

Another possible solution could be that you use a thin PNG gradient that is 1px across and then the height of the page, you then duplicate this using background-repeat, you could even consider using CSS to generator the Gradient for you, but of course your limited by not being able to use shadows and other tweaks.

Answer 3

I suggest you check out Kraken.io, they have an image optimiser. The images in your topic decrease 45% in size, without being visible to the eye!

You could also just use css, colorzilla has a nice tool for creating the right css for all browsers.

If you feel mroe comfortable with an gradient image, drop the color, make it black and white, then give the div/body/element the background like so:

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

Answer 4

Some image editors such as GIMP allow you to apply smoothing as well as control compression when saving a jpeg.

Smoothing: Setting the smoothing option to a non-zero value will smooth out the image slightly. This reduces fuzzy artifacts from compression, and helps with the compression. A setting of 0.10-0.15 removes a good portion of the artifacts without smearing edges.

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

You may also be able to reduce artifacts by controlling the subsampling

While the standard subsampling is usually adequate for most images, providing an good ratio between image quality and file size, there are some situations in which using no subsampling (4:4:4) provides a noticeable increase in the image quality, even if you use a higher compression ratio in order to maintain the file size. The most notable cases are when the image contains some portions with fine details, like text over an uniform background, and images that contain almost-flat colors.

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

Answer 5

Try to add noise to minimize banding:

Photoshop:

1. Create new layer.
2. Go to: Image > Fill... > and use these values:

3. Change the layer's blending mode to Overlay
4. Go to: Filter > Noise > Add Noise... >. These values worked well for me:

5. Adjust layer's opacity to your liking. 22% was kind of OK and the resulting JPG is:

So no nasty banding, smaller size but at the expense of noise. Files are considerably heavier too comparing to the non-noisy version (circa 100kb), but half of the original PNG. Actually I'm bit surprised your PNG was this big.

One more suggestion:

If you don't want to add noise, try to make sure you're working everywhere in sRGB color space, which provides the richest gamut for monitor screens (less banding).