JPG Compression - The Bandwidth Saver 316
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."
More advice (Score:4, Funny)
Re:More advice (Score:4, Funny)
And get this... apparently images are not the only things that computers can compress. I've just learned that there are a slew of programs out there that can compress text-data with amazing ratios.
Staggering.
Re:More advice (Score:3, Funny)
JPG? (Score:4, Funny)
Re:JPG? (Score:2)
You laugh, but I do have a couple pictures I've gotten of people over the years (that would be 14 years at the end of this summer) that are small (res wise)
The rest is white.
So, yeah, this article could help some people out... but still:
Worst thread ever
Re:JPG? (Score:5, Funny)
Reminds me of the friend who wanted to know why his page of family photo thumbnails was taking so long to load. He was using JPEG files, and was shrinking them down to 128x128, but the page was still taking many minutes to load. I took a look at his HTML, and saw that each thumbnail was specified as <img src="p000001.jpg" width="128" height="96">, etc. The trouble was that p0000001.jpg was the full-resolution image! Each one weighed about 500K. He had "shrunk" them by changing the width and height in the img tag - in other words, the browsers were downloading twelve or so full-size images then scaling them into thumbnails. The good part was that clicking on a thumbnail, to see the full image, was instantaneous as the full image was already in the browser's cache.
I didn't have the heart to tell him how clueless his page was.
--Jim
Re:JPG? (Score:2, Informative)
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:JPG? (Score:2, Funny)
they're dumbnails!
Re:JPG? (Score:2)
Re:JPG? (Score:2)
I run a VERY large online art gallery for a friend. She's fairly HTML-incompetent, and uploads 10-15 pictures a week. Automatic thumbnail generation + caching RULES.
I'm on University broadband, so even HTML-resized images don't bother me too much, but it's the PRINCIPLE of the matter...
Oh, and I use those fancy-schmancy compressed JPEG thingies as the thumbnails, too.
Re:JPG? (Score:2)
Re:JPG? (Score:2)
The guy who did our corporate page using Dreamweaver did the same thing.
I didn't have the heart to tell him how clueless his page was.
Don't bother. You'll just get a blank look.
Re:JPG? (Score:2)
Re:JPG? (Score:2)
at the least, translating in such a manner between BMP/TIFF/PGA etc...
Calling a cat a cat. (Score:1, Offtopic)
PPA, the girl next door.
Re:Calling a cat a cat. (Score:2)
Re:Calling a cat a cat. (Score:2)
When I said "Linux", I meant "common Linux distributions". MIME has no meaning in the context of the kernel.
Re:Calling a cat a cat. (Score:3, Funny)
Re:Calling a cat a cat. (Score:2)
There is little need for extensions what so ever when you are working in a graphical environment. The GUI can assign icons to types [if someone hasn't already monopolized on that media type and got their icon on the 'top].
In a console based environment there is also little need. Most users know what files are what and if they don't there is sometimes a color coding involved which helps you know what you can edit. [of course jpeg is little use to a console user].
As far as I know linux has no problem reading the content headers of files but I'm not an expert, just a user. I assume this is done on the interface level, somone speak up!
Re:Calling a cat a cat. (Score:2)
Don't you just love it when you open a 1000-file directory and your hard drive grinds for 30 seconds while your file manager opens every last one of those files to peek inside? Then the GUI thread is bogged down while the icons are updated in real time.
I'd rather just use extensions, thank you. (And the thee character limit helps keep things short and sweet.)
Re:Calling a cat a cat. (Score:2)
I don't mean thumbnails - and there is no need to 'peek' inside each file. The content is known just as fast as the file name.
Also, there is no "three character limit". For years I've been working in different MPEG-1 and MPEG-2 applications which will only save to four characters.
Good idea to rely on those letters which anyone could/can/will/does change.
Re:Calling a cat a cat. (Score:2)
We're talking about GUI icons here, Einstein. They're just hints for the user. Any non-broken program would check the actual file format before operating on a file. (Yes, I realize that a certain large OS company has written broken programs that assume the extension==file format. That's their problem.)
Re:Calling a cat a cat. (Score:2)
Re:Calling a cat a cat. (Score:2)
Here here. I'm sick of hearing people talk about HTM files. Mention assembly language, and they reply "oh, you mean ASM?" Even Windows isn't this dumb anymore; why haven't the users gotten better?
These morons are offensive to us Mac users, and they're polluting Linux too. Anyone have any suggestions for putting a stop to this?
Re:Calling a cat a cat. (Score:2)
files to put in my music collection.
slow day at slashdot (Score:1, Informative)
Parent post a Troll? (Score:2)
Frankly, I agree with him.
Power Switch - The Energy Saver (Score:5, Funny)
Anonymouse Cowarde has posted an article entitled "Power Switch - The Energy Saver". An article for geeks and computer owners showing how they can significantly reduce the amount of power they use by turning off your computer when you're not using it, using one of the most common buttons found on the front of most PCs. If you own a computer and don't yet have knowledge in the field of energy, you should find this very interesting indeed - Save money on electricty and please your significant other at the same time with a quieter room and lower energy bill. They also talk briefly at APM.
Who wants to bet Mr. Tweak is Hemos' pal? (Score:2, Funny)
Re:Power Switch - The Energy Saver (Score:2)
One number:
9.8 m/s^2
When... (Score:2)
Re:When... (Score:2)
You mean like PNG? The problem is browser support - old browsers may not render a new format consistently. Keeping two versions of every graphic and deciding which to send to the browser based on what it can handle is a pain. Having a significant percentage of potential customers see broken links all over everything is unacceptible.
Re:When... (Score:2)
> with an algorithim that's lossless and still
> as small as any equivalent
You mean like PNG? The problem is browser support - old browsers may not render a new format consistently. Keeping two versions of every graphic and deciding which to send to the browser based on what it can handle is a pain. Having a significant percentage of potential customers see broken links all over everything is unacceptible.
No, I mean a lossless image (as png is) that would be the same size as a lossy image (as jpg is) with no loss at all. For a comparison, take a 24-bit color image with lots of detail and compress it into 2 formats - jpg and png. Notice how much smaller the jpg is? Now if you're already working with a reduced color image (256 or less) a gif image (lossless up to 256 colors) would be small and work in all graphical web browsers though the same image in png format would still be a lot smaller. Anyway, I was talking about evolving a new image format, not browser compatibility.
*blinks* and this appears on the front page.. why? (Score:5, Insightful)
Non-compressed images have a large filesize and cost a lot of bandwidth, compressed images look almost as good and cost less bandwidth.
Guide to compress images in PSP 7: save, move slider.
conclusion: compressing is good, hope you found this useful.
*shakes his head sadly* Slow down are fine, but c'mon - we're geeks you know; we can be expected to at least know *some* things...
*kicks self* (Score:1)
Though I should slow down with typing. No time though - must read more pointless articles...
Gah, and then of course I replied within the two minute delay with the "Slow Down Cowboy!" message - how appropriate.
Re:*blinks* and this appears on the front page.. w (Score:3, Insightful)
Oh well, maybe I'll write an article about how to reduce size of GIF files using a smaller color pallete and turning off dithering so it can compress better... :-(
This article needs to be shown to just about every web graphics shop out there, but not to us self-righteous nerds! :)
Re:*blinks* and this appears on the front page.. w (Score:2)
oh oh, me too! (Score:2)
Oh yeah, no mention was made of Portable Net Graphics (PNG) file format and it's lossless compression, or any of the fine free software that utilizes it, GIMP, Electric Eyes, etc.
Re:*blinks* and this appears on the front page.. w (Score:2)
jpg vs gif (Score:2)
GIMP anyone? (Score:2)
Sure, PhotoShop is nice - if you're running a Mac or Microsoft Windows(TM) box and a grand laying around. Paint Shop Pro is pretty nice, does most of what PhotoShop does for a tenth the price - if you're suffering under a MS OS. But hey, you can download GIMP [gimp.org] for FREE. Heck, they even have a Microsoft Windows(TM) port [gimp.org]. Sure, you can't save GIFs or dick with TIFFs, nor can you do a lot of stuff you can do in PhotoShop.
However, GIMP is great for most image manipulation needs.
Re:GIMP anyone? (Score:2)
Instead of GIF, use PNG or SWF (Score:5, Informative)
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].
Transparent PNGs in IE (Score:2)
Iexplore still can't render any PNG image with the least bit of transparent decency.
IE 6 on my machine handles indexed PNG images that use binary (not alpha) transparency just fine. This means that it will properly handle almost all PNGs converted from GIF, as GIF supports only binary transparency and only 255 colors per frame. (IE will not be able to handle PNGs converted from transparent high-color GIF images, that is, GIF images that use multiple frames, each with their own palettes, to draw 4,096 colors.)
You're right that IE 6 will screw up any other transparent PNG image though. But why, on a web site with a solid-color background, do you really need a transparent image? Yes, I know about the "PNG on top of JPEG" hack for site logos, but that typically uses an indexed PNG, putting any drop shadow or halo in the JPEG.
Re:jpg vs gif (Score:2)
As an interactive production manager out here in NYC, I'd have to say "yes" -- at least on the professional side of things. Photoshop (w/ an assist from Illustrator) are *the* tools of the trade for creating static web graphics. (Don't mind the whimpering you hear from the back of the pack. Those are just the people who insist on using Fireworks...) =)
Why use these "behemoths"? Because they let us put the design in "web design", which is ultimately what we get paid for. But there are still plenty of good solutions for the hobbyist crowd, including Photoshop Elements [adobe.com], which retails at $99 (not counting the $30 rebate for PSP users) and has all the features of Photoshop that a smaller web publisher would need.
2) what percentage of those people actually use the software LEGALLY?
Professional use? Most everyone. Personal use? I'd give 20% as a rough guess. I've got registered copies both at home and at work, but I'm probably an exception to the more general rule.
Re:jpg vs gif (Score:2)
90% of the features of Photoshop for a fraction of the price.
Memories of JPEG (Score:2)
What's the best way to speed up your connection? (Score:4, Funny)
A: Run less data through it.
I can write an article about this if Slashdot is interested.
LOL (Score:3, Funny)
Now say 2000 different people read that same review uncached, we save a total of roughly 908mb in outbound data bandwidth for that single review. If 5000 people were to read that review, we are talking gigabytes of bandwidth which can be saved through compression, 2.27gb to be exact. I'll let the stunning numbers speak for themselves.
Sorta ironic how thousands of people are downloading that article right now!
This will be a common conversation... (Score:3, Funny)
Web Designer 2: "That's means we can load even more useless content on our website and they won't notice the difference!"
Web Designer 1: "As well as include more popup and banner ads, too!"
More Interesting News (Score:1)
Re:More Interesting News (Score:3)
As to this increasing the odds of Photoshop on any other Unix - I doubt it. The MacOS X port is to the proprietary backwards-compatible-with-MacOS "Carbon" layer and not writing to the BSD side of things. Thus it's really the old MacOS Photoshop rewarmed and running mostly on a cleaned-up set of APIs. The other changes that have been made are apparently mostly for interaction with the Quartz graphics layer and Aqua UI, again Apple-proprietary.
The next-gen evolution will likely be to MacOS X's Cocoa layer, yet again Apple proprietary. Thus unless someone ports Apple's Carbon library to another Unix or Apple decides to make Cocoa cross-platform along with support for a differing rendering layer we're unlikely to see any of this having any relevance to other Unix's. Of course they can all now talk seamlessly to Photoshop through scripting so they're not entirely out in the cold.
Re:More Interesting News (Score:2)
If they port it to the Cocoa layer, it may be compatible with GNUStep.
Re:More Interesting News (Score:2)
aw shit! (Score:3, Funny)
i use LZW, if that helps?
Wayback machine (Score:2)
JPEG'ing images has been par for the course for any competant web designer since the very incarnation of the WWW.
This is like having a 'news' article to the effect of
"Make your HTML code smaller! Learn what the tags actually are and throw out FrontPage!"
Oooo gee, wow!
Re:Wayback machine (Score:4, Funny)
Re:Wayback machine (Score:2)
Point still stands though.. JPEG support is not only VERY (relatively) old, but proper JPEG use, if anything, was far more important way back when. Try accessing a modern 400K/page site with a 14.4
Watered down article? (Score:2)
How coincidental. (Score:2)
I have to say that I agree with Tycho and Gabe on this one. All too often I'm seeing websites post crappy images claiming that they show intricate detail of upcoming software, yet they compress it to the point that it looks like it came out of one of these [goatse.cx].
Re:How coincidental. (Score:2)
I'd like to see some kind of 'lossy PNG'. PNG files are compressed using the LZH algorithm first used in pkzip, and now used in zlib, gzip and all sorts of places as well as PNG. This works by having a 'sliding window' where the last 32Kbyte or so of data is stored, and then looking back through that window to see if the current sequence of bytes has been output previously. If so, just output a referral back to where the sequence occurred before.
But what if you modified zlib so it didn't require an exact match? You might say that having one pixel in every ten out of place, or set to a 'close enough' colour (eg dark grey instead of black), is good enough to find a match. Then you could generate PNG images which lost some of the original information, but wouldn't look quite as sucky as JPEG. And any ordinary PNG viewer would be able to display them.
I don't know whether this would work well in practice but it's worth trying. Probably for dithered images it would be great but screenshots wouldn't be helped much without losing noticeable quality.
Re:How coincidental. (Score:5, Informative)
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
Re:How coincidental. (Score:2)
Whoops! (Score:5, Funny)
Hmm... (Score:1)
This is not the case for their sample image, but, umm, I'd just like have said anyway that some people are way too quick to save their pics as blurry JPEGs without trying the alternatives.
Come on..... (Score:5, Insightful)
HOWEVER, this is a geek site, which we talk as deeply as going about SMP on x86 systems and remodding systems into other cases (mechanics and engineering, lest that be software or hardware). However, that journalistic line (if there even was that line) has been crossed with this idiotic article. Let's re-read this again to see if it doesnt state the obvious. Also, I'm going to _assume_ that techie people on this website (most all) knows that jpeg is a compression....
Compression - The Bandwidth Saver
Hell, even non-techie people still know that if I zip that file, it doesnt take as long.... This article just insults our intelligence. Slashdot is becoming more and more like TechTV for the net.
And as a last mote, moderators, pay attention to *important stuff* below every post. This article is anything but offtopic.
Choose your compression with care... (Score:5, Interesting)
While compressing your images should be right up there on the Web designer 101 course, sometimes I despair that the wrong types of compression are chosen.
JPEG is an excellent compression method for photographic images, both colour and greyscales. The image distortion is not noticeable by most people even at high compression ratios and the resulting image is close enough to the original.
JPEG is NOT an excellent compression method for line diagrams, maps and bitmaps featuring a limited colour palette - the artifacts created by the transforms used by the algorithms blur rapid changes in colour and can make text unreadable. Even worse, for most diagrams, PNG lossless compression yields smaller results because of the limited palette and large amount of redundancy inherent in the data.
JPEG 2000 promises even better compression ratios with superior image quality. Wavelet compression methods tend to reduce the amount of blur caused by the discrete cosine transforms and are better at handling rapid changes in colours. But that doesn't mean that it is a blanket solution.
I also look forward to the day when SVG is a widely available and widely supported browser option. We can all benefit when complex layouts can be described in terms of vectors and colour fills rather than overlarge and complex bitmaps for the classic web page touches like 3D colour balls and arrows. That will also save bandwidth while increasing the flexibility and variety of images on the web.
Cheers,
Toby Haynes
Re:Choose your compression with care... (Score:2)
Cheers,
Toby Haynes
JPEG is not appropriate for all images (Score:4, Informative)
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.
Re:JPEG is not appropriate for all images (Score:2)
I've had full 800x600 MacOS 9 screen shots compress down to 20K, losslessly, with PNG. JPEG even at Q=0 couldn't make a file that small, and it still looked gawdawful.
While the distinction is often described as natural images versus synthetic images, 3D rendered stuff should be treated as natural images.
The real issue is whether there are large areas of EXACTLY the same color, and sharp edges. In a typical screen shot, you might have several 100x100 blocks of exactly the same color. PNG and GIF do a wonderful job with those. They also do a great job with sharp edges, while the Discreet Cosine Transformation of JPEG causes a lot of artifacts with those, or requires a lot of bits to encode them accurately. So something simple as a black line on a white background is quite mathematically complex for JPEG to render.
Overall, PNG will give slightly smaller files, and more importantly provides for more than 256 colors. I look forward to when it is ubiquitously supported by all browsers.
Now if only... (Score:3, Funny)
How jpegs work. (Score:4, Informative)
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?
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.
aol recompresses your jpegs (Score:5, Informative)
Re:aol recompresses your jpegs (Score:2)
I think AOL has a pref on the user side to disable this behaviour. You should search their site because they might have some way to disable it on the server as well, for example by inserting a meta tag or http header to data as its pushed out.
JPG Compression... (Score:2, Informative)
Orange
Not a terribly informative article (Score:2)
He doesn't appear to know a lot about what he's talking about. He calls a jpeg saved at 25% compression "25:1", where in fact the quality setting has direct relationship with file sizes.
Here are some tips I've found over the years of putting together web sites:
interesting article... (Score:4, Interesting)
I don't know who i'm most disappointed in.
A - Tweaktown, for posting such an inane article in the first place
B - MrTweak, for relaying it to slashot. Of course, he probably wrote it.
C - Hemos for posting it.
I mean really... the whole thing reeks of MrTweak wanting more site traffic and turning to slashdot with a story about anything to get it. Like "oh my god, i didn't know i could COMPRESS graphics?"
Proposal to slash: never accept submissions from people with obvious links to the article in question...
Re:interesting article... (Score:2)
Its a sad day when Slashdot starts posting trivial crap like this (not that the article per-se was crap, but it was written for a complete web-newbie).
Anyone know of any geek sites with higher standards than Slashdot? I think its time to find a new place to get my nerd-news.
Brian
JPG compressed? (Score:2)
A better title for this... (Score:4, Funny)
Jeez. Why is this on slashdot?
Re:A better title for this... (Score:2)
The pain of rejection (Score:4, Funny)
just nuke the trash in the .jpg file (Score:3, Informative)
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.
What's JPG compression? (Score:2)
I once had a die-hard mac user tell me that "JPEG" pictures evolved on the mac, because they had a four letter name, and type and creator info on mac files was four letters long. Nevermind that it was named after the Joint Photographic Experts Group...
NEXT ON SLASHDOT (Score:4, Funny)
Save more - make your type _really small_?? (Score:4, Insightful)
What ever did happen to the idea that the Web is about letting the user set their browser's default type size to suit their eyes, and writing pages that honor the user's preference?
___
How does the JPEG group make money? (Score:2)
Image Compression (Score:2)
DAMN! TOO LATE!
Hey its 4/20 (Score:3, Funny)
"Dude, this image is only 20 fucking kilobytes big."
"Whoa."
"Damn."
"You just blew my mind."
"POST IT!"
Really, get with it! (Score:2)
i understand now (Score:2)
er... (Score:2)
Bandwidth conservation society (Score:3, Informative)
Parent post off topic? (Score:1, Offtopic)
a.) It was on topic
b.) It was funny
Re:Um, I thought this was common knowledge... (Score:2)
Re:Um, I thought this was common knowledge... (Score:3, Informative)
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:Um, I thought this was common knowledge... (Score:2)
Well, for your information, certain programs (Front page extensions to be precise) rely on you using either gif or bmp for the backdrops on their automatically generated navigation icons and theme elements. Well, frontpage 2000 did, cant speak for 2002 extensions.
This makes alot of sense relative to JPG, but isn't as good as PNG, which seems to code the icons in about half the space.
You can still use any file format for the main body of your site, its just a failing (one of many) in the server extensions to generate icons on the fly.
My 2c worth,
Michael
Re:Nobody here seems to mention the DjVu format... (Score:2)
While these constraints aren't an issue for folks attempting to document illuminated manuscripts and other like materials they are very much a problem for folks on the World Wide Web. Unless you're going to insist on sending hapless browsers to an English-only website for an obscure plugin that few servers even have MIME-mapping for anyway, insist they install this plugin to their browser & OS assuming they're even supported ( oh wait - the website is now dead! ) then come back to browse a website, well good luck.
In the meantime the rest of us will lumber along using more general-applicability formats already widely supported by tools and browsers such as GIF, JPEG, increasingly PNG and somewhat TIFF. Let us know when you read another technology-of-the-future article from '98 though! Hey, check out IFF, another where-is-it-now (for good reason.)
GIFs aren't lossless.... (Score:2)
While you can offset this somewhat by using a selective pallette, most of the time it is still noticeable.
Tim
Re:Evil (Score:2)
Where we used to get uncompresssed we now get compressed because although the quality is worse, we can fit more stuff on whatever medium comes on.
I was just starting to really get pissed off about the world we live in, and then I discovered that Opera (which I only started using yesterday after using Mozilla for a while) hides the mouse pointer while you are typing- at last! Sanity! No more elbowing the mouse out of the way while typing in usernames on websites! Hoorah!
graspee