Why low quality JPG saved as high quality in Photoshop increases the file size?
If you have a low quality JPEG which you open and re–save with 100% quality (or 0% compression) in any image editing software, the output will be bigger in size than the source. In order to understand this, it is good to take a crash course on JPEG.
JPEG compression isn't comparable to ZIP compression: ZIP works both ways—you can compress and later decompress to have the original file back.
JPEG compression, however, is a one-way job. Roughly speaking, during the encoding of the JPEG file, the image is split to 8×8 px blocks, from which a kind of spatial frequency spectrum is created by discrete cosine transform. After transform, the amplitudes of the frequency components are quantised.
The quality setting will (roughly) determine how much quantisation will be made. What gets lost in quantisation is long gone. Some further compression will be applied, but from this point forward it is usually lossless.
Now, when you open the encoded JPEG image in your favorite image processor, the JPEG gets decoded. If the JPEG isn't encoded with a lossless setting, you don't have all the same details as the original JPEG had: remember—some bits of data has been lost i.a. during the quantisation. As JPEG is encoded block–by–block the compression appears in the decoded image as jaggedness and JPEG–artefacts. Also some colour & brightness information has been lost.
When you save this decoded JPEG file again, the image processor's JPEG encoder does not take into account whether the file has been compressed before or not—it just encodes it as it would encode a lossless file, i.e. every pixel should look as every pixel looks like. When using 100% quality / 0% compression setting, the encoder will try as hard as it can to preserve all the details—and that includes all the jaggedness, artefacts, color & brightness data as they are.
The file size increases because the actual compression is not the jaggedness or the artefacts. The compression is the rounding and quantisation of the "instruction set" from which the JPEG is decoded and rendered to your screen.
In other words, you don't decrease file size with great effect just by making the image look more jaggy or by adding artefacts. This means that if you save a jagged JPEG with the best quality, its size will not greatly differ from a non-jagged JPEG saved with the best quality.
Again: the JPEG encoder assumes its input is lossless and when you open a compressed JPEG the rendered image (what you see on your screen with all the jaggedness & al.) will be the "lossless input" for the encoder.
The problem is, I have this background and want to add a logo image over it, and then save it. But If I do so, I have to save this with 10% quality, and the logo looks horrible. If I save this to 100% quality, the file size is huge.
There is a lot of options between 10% and 100%! In the dialog that allows you to set the JPEG compression, you can choose it to preview the output. This, for one, allows you to visually inspect which would be a good setting.
Other good option, as many of users have already suggested, is to use Save for Web & Devices… dialog, which allows you to preview not only different JPEG compressions, but also how your output would look if you convert the image to PNG-8, PNG-24 or to a GIF image.
A PNG-24 image is lossless and in many cases beats JPEG when the source image is not photography–like: shapes and solid/predictable areas of colour are areas in which PNG will excel. As you have a logo on a background, it might be a good option. Of course the artefacts from the low-quality JPEG-background will be included in the output.
The best option I would suggest (as the question is migrated form webmasters.se) is that you leave the background as it is and save the logo as transparent PNG-24. Then you position the logo on top of the background with CSS. You retain the quality of the logo and will not cripple the JPEG background more.
