JPG Compression - The Bandwidth Saver

Mr.Tweak writes "TweakTown has posted an article entitled "JPG Compression - The Bandwidth Saver". An article for webmasters and site owners showing how they can significantly reduce the amount of bandwidth they use by compressing JPG images, one of the most common formats for web images. If you own a website and don't yet have knowledge in the field of JPG compression, you should find this very interesting indeed - Save money on bandwidth and please viewers at the same time with quicker loading webpages. They also talk briefly at JPEG2000."

slow day at slashdot

[deathscythe257]

umm... huh... I was hoping there might be a news article here.

JPEG is not appropriate for all images

[Ryu2]

The article didn't discuss the merits of other formats vs. JPEG enough. Namely, non-photograhic images, with few colors and mostly large solid areas, such as icons, bullets, line drawings, diagrams, charts, etc. are not optimal for JPEG.

In such cases, GIF and PNG will yield much better compression than JPEG, and also look nicer, since they're lossless. Compressing such images with JPEG will give you ugly "ringing" artifacts, since the lines are essentially infinite-frequency "spikes" which you can't capture completely.

How jpegs work.

[furchin]

I got trapped into clicking the link to the article, thinking it could be something useful about jpeg compression and how it works. The story certainly implied that. How disappointed I was, and I agree with most people that this is one of the dumbest stories ever. This kind of story belongs in a site for amateur wanna-be web designers, not geeks. Anyway, since I've gotten all caught up in this, and you're here too, maybe we can have a useful discussion on How JPEG Compression Works.

I am by no means an expert, and I believe this is a gross simplification of the process, but here is what I think happens. The jpg alg breaks the image apart into 8 pixel by 8 pixel subimages. (Don't ask how it handles pictures that are not n*8 x m*8 in size). Then it treats each of those images with a process very similar to principal component analysis, where a set of representative images are given associated multipliers of how much of that image to add into the reconstructed original image the user is trying to get. These representative images are ordered from least to most detailed, and since they are known to both the compressor and the uncompressor (depressor? :), only the associated values need to be stored. I believe the first image deals with how much darker the left half is than the right half of the image, the second does the same thing horizontally, the third deals with how much darker the leftmost quarter of the image and the third quarter of the image are darker than the other two, and so on...

So how does one adjust image quality / compression? Well every possible 8 x 8 picture can be represented with 64 of these representative images. However, since the 64th deals with *really* minute details, then you can get a decent reconstruction using just 63. It all depends on the image you are trying to compress, but can probably get away with even just the first 20 of the basis images. Oh, for the record, I'm talking about grayscale here. I think you'd need to ramp things up by a factor of 3 to do rbg.

If someone wants to fill in any gaps or factual inaccuracies, certainly do so.

Instead of GIF, use PNG or SWF

[yerricde]

Although jpg compression is definitely helpful, the article forgets to mention that two image formats are supported by all browsers. GIF being the second.

In addition, 4.0 and newer browsers support Portable Network Graphics (PNG).

GIFs should be used for vector based graphics

No they shouldn't [burnallgifs.org]. Use PNG for still images. Use SWF (now an open format [openswf.org]) or MNG (not much browser support yet [libpng.org] but works in Mozilla and Konqueror) for animations.

and provides a better overall quality/size advantage when done right.

PNG can be 10% smaller than GIF when crushed properly [sourceforge.net].

aol recompresses your jpegs

[Chaostrophy]

At my last job, we wondered why our carefully tuned images looked like shit on AOL. We found they were recompressing our jpegs to make them much smaller (and thus lower quality). So we now send AOL really high quality jpegs so that our images don't get trashed as badly by AOL.

JPG Compression...

[OrangeHairMan]

http://www.spinwave.com/crunchers.html [spinwave.com] is a great free website that can compress your JPEGs (and GIFs)...I use it all the time for the images on my site [mac.com].

Orange

just nuke the trash in the .jpg file

[coyote-san]

If you want to save bandwidth, just nuke the trash various image editing tools leave in the .jpg file. (E.g., use jpegtrans(1))

Maybe you want to keep thumbnails in images on your development system, but all they do is burn bandwidth on the production system. You can usually reduce the size by a significant amount, even if you decide to add your own copyright messages, etc.

Re:JPG?

[a_n_d_e_r_s]

I didn't have the heart to tell him how clueless his page was.

Why not ???

It we never educate the clueless we will have a world of clueless people...

For example people who write fantastic 'expert' 'high-tech' articles of how you could - gasp! - compress images so they are faster to download.

By not helping him he will could spread his 'expert' knowledge to others. In the long run he probably would have been better off by you telling him the truth.

Re:Um, I thought this was common knowledge...

[ergo98]

This points out that choosing the proper compression format is not common knowledge, and there are still loads of people who confuse one over the other.

JPEG is not better than GIF/PNG, but rather it's for a different purpose: As others have pointed out (hence I'm being redundant), JPEG is for photo-realistic images with lots of smooth gradiants and subtle tone changes. JPEG is lossy, meaning that if you did a perpetual cycle of compression/decompression you continually degrade the image. GIF/PNG is not lossy, and the decompressed image is exactly the same as the original (like LZWing the file), and it is useful where you want precise images (such as icons, banners, graphical text, etc.). GIF can actually compress comic type images to a much greater degree than JPEG can (and, because it's lossless, you don't get the artifacts of JPEGs).

Re:How coincidental.

[Glenn R-P]

I'd like to see some kind of lossy PNG

That's JNG (JPEG Network Graphics) which is JPEG wrapped in PNG-style chunks along with an optional alpha (transparency) channel. Mozilla will display them and IrfanView will process them.

The JNG spec is available somewhere on the PNG web site, http://www.libpng.org/pub/png

Bandwidth conservation society

[4444444]

any webmaster that hasn't checked out the bandwidth conservation society should be slapped