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
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.
Attribution
Source : Link , Question Author : Aki , Answer Author : Community