: How do I convert a .png blurred background into a compressed .jpg one without introducing artefacts? I'm currently dealing with a problem of image quality for my website background image. I have

@Bryan765

Try to add noise to minimize banding:

Photoshop:


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





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





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).

Vote Up Vote Down

@Speyer780

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.

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.

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

Vote Up Vote Down

@Debbie163

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.

Vote Up Vote Down

@Gloria351

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.

Vote Up Vote Down