In desperate need of filesize help!

Breakpointcity · Post by **Breakpointcity** » Mon Oct 15, 2001 7:55 am

Hey everyone! Boy, it's been a while since I've posted here, but I need help (even more so than usual)!
My comic, <A HREF="http://breakpointcity.keenspace.com/'" TARGET=_blank>Breakpoint City</A> has recently made the switch to color, and since then, the file sizes of my comics have obviously risen. I've been using the evil JPG format, without any compression (I HATE what lossy compression does to pictures), and although the comics look awesome, people with phoneline modems are complaining. Well, I've been looking into other formats, and I have some questions:1. I've heard alot about PNG, but every time I save the file, it ends up larger than the original in size. Is there any compression program or method I should be aware of?
2. What would you say is the "maximum" size a regular colored comic should be in order to downnload quickly over the net? I know this varries, but I'd like to shoot for a specific size with my compressions.
3. Besides GIF, JPG, and PNG, What other formats does the Autokeen script allow?My comics unfortionatly use a LOT of color, so getting them under 150 KB is going to be a stretch. If anyone has any words of wisdom, let me know!-brian Emling
------------------------
Breakpoint City: The Comic Strip of tomorrow, TODAY!
<A HREF="http://breakpointcity.keenspace.com" TARGET=_blank>http://breakpointcity.keenspace.com</A>[This message has been edited by breakpointcity (edited 10-15-2001).]

Rahn · Post by **Rahn** » Mon Oct 15, 2001 10:12 am

Well I use photoshop, and the best way to get filesizes down is to switch to indexed color (for gif files).It will bring up a list of various color selection methods. I use adaptive or selective coloring and set the colors to 50.The image quality stays relativly intact, and the filesize becomes quite small.Though I'm not sure of what other programs can do this.

Breakpointcity · Post by **Breakpointcity** » Tue Oct 16, 2001 4:05 am

Thanks in advance, Rahn!

Breakpointcity · Post by **Breakpointcity** » Tue Oct 16, 2001 7:54 am

Well, I found a program that really helped me. It's at <A HREF="http://www.download.com" TARGET=_blank>www.download.com</A> , and it's called "xat.com Image Optimizer". It helped me bring my archive from 15MB to 4.5 MB. Of course, it's a 30-day trial, but until then, everything works great! Now why can't photoshop do the same thing?Oh, and thanks for visiting my site guys! I gotta post on these forums more.------------------
------------------------
Breakpoint City: The Comic Strip of tomorrow, TODAY!
<A HREF="http://breakpointcity.keenspace.com" TARGET=_blank>http://breakpointcity.keenspace.com</A>[This message has been edited by breakpointcity (edited 10-16-2001).]

Rahn · Post by **Rahn** » Tue Oct 16, 2001 8:12 am

Well the way I go about changing color modes is:Image > Mode > RGB colorThen I doImage > Mode > Indexed colorThat causes a window to pop up which will ask you for a palette, and how many colors.If it doesn't then I guess your version doesn't have it...or something.Now back I go to try and get my webpage layout done =P----Hello Red, this is Blade from DT (in case you didn't know ^-^)

Redmoon Twilight · Post by **Redmoon Twilight** » Tue Oct 16, 2001 8:28 am

Hi!, just came back from checking out your comic and I enjoyed it very much. You're very talented. <IMG SRC="http://www.keenspace.com/forums/biggrin.gif"> As for file sizes, Rahn has pretty much given you the best advice you could get. Paintshop pro also has good compresion wizards for JPEG's and Gif's. My comic varies from 70k to 85k on average but it's half the size of yours. I'm personally looking into using flash static .swf files which has been told to me give you the best compresion without losing detail. Keep up the good work! ------------------
Gotta love long comic strip names:

<A HREF="http://trialsandtrivializations.keenspace.com" TARGET=_blank>Trials and Trivializations</A>

Post by **Kisai** » Sun Oct 28, 2001 12:51 am

The best way to use PNG is to let PhotoShop/PaintShop Pro save it, then use PNGCRUSH and/or PNGREWRITE to recompress it.There is a known bug in PhotoShop 5-6 that pretty much makes PNG files non-compressed. What you do is use PNGCRUSH, PNGCRUSH -brute infile.png outfile.pngMost PNG files exported by Photoshop or PaintShop achive at the minimum 10% size decrease.JPG in the least compressed mode still makes things blurry and achives poor compression without destroying the image. Use JPG only on photo-color images where the details will not be easily lost. JPG is worst with text and sharp edges.GIF/PNG, Palette reduction: This method reduces the colors, but still is not the ideal method. If your image already has less than 256 colors then go this route. If it has more (like in the thousands) try true color PNG. In PhotoShop/PaintShop Pro use the Octree color reduction to use as many of the original colors as possible. Do NOT use error diffusion if you are trying to reduce the file size, ERROR DIFFUSION will destroy any ability for the file to be compressed by the internal LZ(PNG) or LZW(GIF) compression methods. The reason is that the compression in these methods relies on the horizontal pixels being the same to compress them, the more the same, the more compression, Error diffusion makes images have a "sparkle" effect which does not compress very good. Another color reduction method is Optimized Median Cut, this method will pick colors that are close to the existing colors and will reduce the amount of colors in the amount the palette is set to. The problem with this method is that it usually picks colors that are not as good as the original.Other methods of decreasing file size (works for gif/png/jpg) is to leave parts of the image solid color or to only use vertical gradients (vertical gradients have horizontal pixels that are the same, which compress better) To prove my point, save an image that contains nothing but a gradient, then rotate it 90 degrees and save it again as another file. the file compression will be diferrent even though it contains the same amount of pixels.

Reinder · Post by **Reinder** » Sun Oct 28, 2001 2:29 am

Note that to create small gifs, you must make them Indexed, just like you do with Gifs. The GIMP creates good, small PNGS and shows you a neat dialog in which you can set the level of compression (which is lossless).I have just used PNGCrush on a huge load of master files which I also keep as PNGs. It improves over Paint Shop Pro's PNG compression by up to 18 %, and even improved on the GIMP's compression.My site, <A HREF="http://www.rocr.net/" TARGET=_blank>Rogues of Clwyd-Rhan</A>, makes a point of trying to keep its color PNGs under 60K, and its B/W PNGS under 40. I've succeeded so well on that, I've been able to switch to a larger canvas size for November's ROCR strips (which will be B/W) without straining my readers' modems.PNG rocks, but you have to learn how to make them.------------------
Reinder Dijkhuis
<A HREF="http://www.rocr.net/" TARGET=_blank>Rogues of Clwyd-Rhan</A>, Humorous fantasy strip, updated Mon-Fri, and really rather good. <A HREF="http://www.rocr.net/d/20000701.html" TARGET=_blank>Read it from the first strip!</A><A HREF="http://whio.keenspace.com/" TARGET=_blank>White House in Orbit</A>

Post by **Kisai** » Mon Oct 29, 2001 3:39 am

Depending on the actual image, it's the conversion between RGB and indexed color where most people make mistakes.Using Jasc Paint Shop Pro, here are the color reduction methods, and the approximate "what happens"Optimized Median Cut
What it does: Reduces colors by making an optimized palette.
Nearest color - color banding (95 colors)
Error diffusion - acceptable quality (85 colors)
Error diffusion(reduce color bleeding) - acceptable quality (104 colors)Optimized Octree
What it does: reduces colors by trying to keep the most amount of existing colors in the image.
Nearest color - acceptable quality (less obvious banding) (255 colors)
Error diffusion - acceptable quality (207 colors)
Error diffusion (reduce color bleeding) - acceptable quality (254 colors)Standard/Web Safe-
What it does: Uses the Web-Safe palette
Nearest color - *gag* (18 colors)
Orderd Dither - looks horrid (37 colors)
Error diffusion - pronounced sparkle pattern (49 colors)GreyScale
What it does: Averages the R G B values to choose a grey shade.
It's greyscale, the usual problems are banding gradients and the fact that it's not color.
(144 shades of grey)The base image has 607 colors in two vertical gradients in a 256x256 image.
C - Crushed
R - Rewrite
CR - Rewrite and Crushed 500 CRStandard-NearestColor.png
517 RStandard-NearestColor.png
596 CStandard-NearestColor.png
612 Standard-NearestColor.png
698 CGreyScale.png
883 Greyscale.png
898 CRMedianCut-NearestColor.png
956 RMedianCut-NearestColor.png
996 CMedianCut-NearestColor.png
1,011 CRGreyScale.png
1,051 MedianCut-NearestColor.png
1,589 RGreyScale.png
1,598 CROctree-NearestColor.png
1,616 COctree-NearestColor.png
1,718 Cbaseimage.png
1,805 BaseImage.png
1,830 ROctree-NearestColor.png
1,925 Octree-NearestColor.png
2,089 CRStandard-OrderedDither.png
2,163 COctree-ErrorDiffusion(reduce_color_bleeding).png
2,164 RStandard-OrderedDither.png
2,182 CStandard-OrderedDither.png
2,208 CROctree-ErrorDiffusion(reduce_color_bleeding).png
2,241 Standard-OrderedDither.png
2,372 ROctree-ErrorDiffusion(reduce_color_bleeding).png
2,470 Octree-ErrorDiffusion(reduce_color_bleeding).png
2,489 Baseimage(Compression15).jpg
3,094 Standard-NearestColor.gif
5,368 MedianCut-NearestColor.gif
6,508 Baseimage(Compression2).jpg
7,071 Greyscale(octree).gif
7,124 CRMedianCut-ErrorDiffusion(reduce_color_bleeding).png
7,135 RMedianCut-ErrorDiffusion(reduce_color_bleeding).png
7,220 CMedianCut-ErrorDiffusion(reduce_color_bleeding).png
7,221 MedianCut-ErrorDiffusion(reduce_color_bleeding).png
7,661 Octree-NearestColor.gif
8,417 Baseimage(Compression1).jpg
10,004 CROctree-ErrorDiffusion.png
10,092 ROctree-ErrorDiffusion.png
10,102 COctree-ErrorDiffusion.png
10,184 Octree-ErrorDiffusion.png
11,162 Octree-ErrorDiffusion(reduce_color_bleeding).gif
12,059 Standard-OrderedDither.gif
14,088 CRMedianCut-ErrorDiffusion.png
14,174 CMedianCut-ErrorDiffusion.png
14,311 RMedianCut-ErrorDiffusion.png
14,427 MedianCut-ErrorDiffusion.png
16,262 MedianCut-ErrorDiffusion(reduce_color_bleeding).gif
17,812 Octree-ErrorDiffusion.gif
18,691 CRStandard-ErrorDiffusion.png
18,691 RStandard-ErrorDiffusion.png
18,721 CStandard-ErrorDiffusion.png
18,734 Standard-ErrorDiffusion.png
20,049 MedianCut-ErrorDiffusion.gif
22,542 Standard-ErrorDiffusion.gif
As you can tell the Error Diffusion methods compress the worst.The gif files were the png files of the same name just exported with "use existing palette"The Jpg files were the base image and then exported to jpg with a certain compression settingYour mileage may differ. Specifically certain types of files that already contain less than 256 colors should NEVER be compressed using error diffusion, since they can be compressed using the Octree method and will result in a lossless color reduction. Compressing with Optimized Median Cut will reduce the number of colors in the image regardless to come up with an optimized palette. This is not a good thing if you want to use exactly the colors that are in your image.(additional info)Now specifically about the site in question(breakpointcity.keenspace.com), the comic is a 67KB png file, but the entire pageload (minus ad) is 229KB!A 56K modem running at 53333 would take at least 35 seconds to download the page.I went ahead just for the hell of it...
I reduced the total page load by 24KB just by converting all the gifs to pngs and doing both pngrewrite and pngcrush on all the resulting png files.210,798 PNG optimized (205KB)
234,684 Original GIF version (229KB)
(all 44 files, 40,127 of this is the .htm file, 5,714 is navbar.jpg)So this saves about 5 seconds in download time. (at 56K)However it also destroyed the animated ones (flattened, no animation)[This message has been edited by Kisai (edited 10-29-2001).][This message has been edited by Kisai (edited 10-29-2001).]