Slashdot Mirror


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

33 of 314 comments (clear)

  1. More advice by kindbud · · Score: 4, Funny

    Computers can make problems requiring complex repetitive calculations a much less onerous task to solve. I highly recommend that people apply computers to difficult scientific questions.

    --
    Edith Keeler Must Die
    1. Re:More advice by Admiral+Mouse · · 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.

      --
      Life if possible, art at any cost.
    2. Re:More advice by darien · · Score: 3, Funny

      I sspct lssy cmprssion s rthr mr ntcbl wth txt thn wth pctrs.

  2. JPG? by ar1550 · · Score: 4, Funny

    Compression? I'd just been renaming my .bmp's to .jpg - you mean I actually have to "compress" them to a .jpg to gain any benefit? Wow, my readers will sure be pleased. Next, you'll be telling me that my Flash-only websites should use shapes & instances instead of manually manipulating every pixel.

    --
    I once shot a man in Reno 'cause they cancelled Firefly.
    1. Re:JPG? by kzinti · · Score: 5, Funny

      You laugh, but I do have a couple pictures I've gotten of people over the years ... that are small (res wise) .JPGs, about 400-600kb each.

      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

  3. Power Switch - The Energy Saver by wadetemp · · Score: 5, Funny

    In other news:

    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.

  4. *blinks* and this appears on the front page.. why? by Aanallein · · Score: 5, Insightful

    Short run down of the linked-to article:
    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...

  5. What's the best way to speed up your connection? by NanoGator · · Score: 4, Funny

    Q: What's the best way to speed up your connection?
    A: Run less data through it.

    I can write an article about this if Slashdot is interested.

    --
    "Derp de derp."
  6. LOL by Dwedit · · Score: 3, Funny
    As you can see from the 25:1 compressed image above, there is really not much of a difference in terms of image quality from the original image at 2:1 - but a save of 44.6kb in file size. Consider this as a practical example - a new piece of content you post has ten images in it, for simplicity reasons at 63.2kb each (632kb in total), we save a total of 465kb, seemingly not a great deal on an individual basis.

    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!

  7. This will be a common conversation... by Navius+Eurisko · · Score: 3, Funny

    Web Designer 1: "Hey, this JPG compression will save our average 56k user about 5 seconds on load time."

    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!"

  8. aw shit! by paradesign · · Score: 3, Funny
    you mean i shouldnt have been using TIFs this entire time?!? no wonder my site loads so slow.

    i use LZW, if that helps?

    --
    I want 2D games back.
  9. Re:*blinks* and this appears on the front page.. w by weave · · Score: 3, Insightful
    Really... I also found it hilarious that the pages are loaded with shockwave ads and large 256 color gif files for simple border bits that could be done in 4 colors.

    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! :)

  10. Whoops! by CaseyB · · Score: 5, Funny

    Pardon me, I seem to have accidentally stepped into a conversation from 10 YEARS AGO.

  11. Come on..... by josh+crawley · · Score: 5, Insightful

    Now, I can understand if slashdot wants to put techie reviews or such other geek stuff. That's understandable, in the case of YRO, company product release (that april spoof about sponsoring products was true, wasnt it?), and software issues.

    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.

  12. Choose your compression with care... by tjwhaynes · · 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

    --
    Anything I post is strictly my own thoughts and doesn't necessarily have anything to do with the opinions of IBM.
  13. Re:Wayback machine by GigsVT · · Score: 4, Funny

    Man, now I am going to have to redesign my page to get rid of all those uncompressed TIFFs.

    --
    I've had enough abrasive sigs. Kittens are cute and fuzzy.
  14. JPEG is not appropriate for all images by Ryu2 · · Score: 4, Informative

    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.

    --
    There's 10 types of people in this world, those who understand binary and those who don't.
  15. Re:Calling a cat a cat. by Anonymous Coward · · Score: 3, Funny

    Yes, but using "JPG" instead of "JPEG" saves a byte of bandwidth.

  16. Re:More Interesting News by maggard · · Score: 3
    As the original subject (JEPG - a revolution!) is pretty much useless this at least is more interesting:
    More interesting, IMHO, is the fact that Photoshop is out for MacOS X. I'll be interested in what effect this has on the uptake of the OS, and whether it might ever lead to Photoshop on *NIX.
    Yes, I think this will increase the uptake in MacOS X. Lots of graphics folks have been holding out for this, apparently it's a great implementation and will indeed likely drive much of their marketplace (just think of all of the plug-ins that will need to be upgraded.) The spillover should be a shot in the arm for the whole Mac software market and increase pressure on everyone to make the switch.

    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.

    --
    I don't read ACs: If a post isn't worth so much as a nom de plume to its author then I wont bother either.
  17. Now if only... by ZoneGray · · Score: 3, Funny

    Now if only they could convince people to build pages that have fewer than 100 GETs, it might actually make a difference.

  18. How jpegs work. by furchin · · Score: 4, Informative

    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.

  19. Instead of GIF, use PNG or SWF by yerricde · · 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. Use PNG for still images. Use SWF (now an open format) or MNG (not much browser support yet 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.

    --
    Will I retire or break 10K?
  20. aol recompresses your jpegs by Chaostrophy · · Score: 5, Informative

    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.

    --
    Plato seems wrong to me today
  21. interesting article... by um...+Lucas · · Score: 4, Interesting

    It would be interesting, if it'd been written and posted in 1992, rather than 2002.

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

  22. A better title for this... by rossz · · Score: 4, Funny

    would be "Stating the fucking obvious."

    Jeez. Why is this on slashdot?

    --
    -- Will program for bandwidth
  23. The pain of rejection by Sloppy · · Score: 4, Funny

    I submitted this story in 1990 and it was rejected. What gives?

    --
    As copyright owner of this comment, I authorize everyone to defeat any technological measure which limits access to it.
  24. just nuke the trash in the .jpg file by coyote-san · · Score: 3, Informative

    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.

    --
    For every complex problem there is an answer that is clear, simple, and wrong. -- H L Mencken
  25. Re:Um, I thought this was common knowledge... by ergo98 · · Score: 3, Informative

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

  26. NEXT ON SLASHDOT by cygnus · · Score: 4, Funny

    new headline: "Attracting user attention with the tag!"

    --
    Just raise the taxes on crack.
  27. Save more - make your type _really small_?? by wytcld · · Score: 4, Insightful

    Smart site that, setting the style on their body text so that in Mozilla it's teeny-tiny. This form of compression saves the reader from time otherwise spent scrolling the screen. It saved me the time of even reading at all.

    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?
    ___

    --
    "with their freedom lost all virtue lose" - Milton
  28. Re:How coincidental. by Glenn+R-P · · Score: 5, Informative

    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

  29. Hey its 4/20 by gad_zuki! · · Score: 3, Funny

    *Hemos and buds in a smoke filled room*

    "Dude, this image is only 20 fucking kilobytes big."

    "Whoa."

    "Damn."

    "You just blew my mind."

    "POST IT!"

  30. Bandwidth conservation society by 4444444 · · Score: 3, Informative

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

    --

    http://Lenny.com
    4 great justice!