15

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:

enter image description here

JPG (100%) quality:

enter image description here

  • What are the dimensions of this image? – MrWhite Oct 21 '14 at 13:10
  • is 200kb too big in this day and age? – SaturnsEye Oct 21 '14 at 15:28
  • It seems the tool I used originally to compress the image wasn't lossless but was lossy (tinypng.com). This was the reason why the png was terrible when compressed. Anyway all your answers helped. Thanks! – Aki Oct 21 '14 at 15:56
  • 1
    @SaturnsEye Yes, for a non-essetial image it absolutely is. Just think of the mobile visitors. For essential images, of course, it's fine. – Kjeld Schmidt Oct 22 '14 at 7:11
  • 1
    For mobile would you not consider using .SVG? as they're tiny – SaturnsEye Oct 22 '14 at 7:25
13

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.

  • This PNG is created with Fireworks and contains a small amount of "cruft". pngcrush and similar programs can certainly make the file smaller. – usr2564301 Oct 21 '14 at 12:41
  • 3
    Yes, 200kB is big if your laptop is on a wireless connection, especially outside Japan, Republic of Korea, and western Europe. It is common practice in the cellular and satellite last mile markets to bill the customer by the bit. – Damian Yerrick Oct 21 '14 at 20:23
15

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.

8

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')
1

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

0

Try to add noise to minimize banding:

Photoshop:

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

enter image description here

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

enter image description here

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

enter image description here

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

  • I can see some color change in my image... I guess that's something about color profiles as this method shouldn't affect the artwork's color. – ellockie Oct 22 '14 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.