Image compression for webcomics

Question

As probably many people around here I read a few webcomics. Drowtales is my favorite, but that's besides the point.

For a long time a thought has been nagging me at the back of my head: webcomics are drawn pictures. They are not photographs. There should be a lot of redundancy (less colors, more flat colored areas, etc.) and thus they should be easily compressible at quite high rates while still maintaining lossless quality. Still it seems that the best tool to compress them is the same old lossy JPEG.

How so? Are there not better things invented? I'm not an expert in data compression, so my own meager attempts at finding some better algorithm have been fruitless. Best I could find was Pngcrush, but it still is way behind JPEG in terms of compression.

I would like to hear an expert opinion on this. Is this idea of mine foolish and doomed to failure? Or is there perhaps some way that people have found or that I could look into?

This, of course, comes from the selfish desire to decrease load times. :)

Added: Some people seem to miss the point, so I'll clarify:

Webcomic images should have a lot of redundancy in them so they should be easily compressible. Is it not possible to somehow compress them so that they would be both lossless AND smaller than JPEG? Or at the very least compress them better than JPEG while still retaining the quality.

Since they would be for web the specialized compressor should still probably emit PNG or JPEG - just compressed with a modified algorithm for better results.

Answer 1

For pen-and-inkish images, the compression scheme in GIF can work wonders.

JPEG compression is ill-suited to that kind of image.

Answer 2

The problem with comics is that a lot of graduated colouring is used. A common technique when colouring a comic on computer using Photoshop, for example, is to start by blocking out areas in solid colour as you mentioned. However, these solid areas are then refined using various techniques, from hand touching using airbrush tools to overlaying graduated fills, dodging and burning tools, etc.

The result is an image which is more like a natural image - which is what comic artists are striving for of course - and thus it compresses better with a lossy algorithm such as that used by JPEG.

Answer 3

No matter how great a lossless compression is, a loss compression will always be better, because it just has fewer limitations.

Imagine that one day they invent some lossless compression better than jpeg for comics, obviously the next day someone will modify it to compress more, even, and probably, if it means that some info is lost.

Answer 4

Drawn vs. not drawn, web comics vs. any other type of image... that's not relevant. The specifics of how web comics are drawn or the colors are laid out or whatever is something you're perceiving as different. But you can bet that decades of graphics research and development have that fully taken into account, and the people that do graphics optimizations for a living have pushed the envelope.

If there was a better compression algorithm than JPEG, GIF, PNG, etc. then don't you think it would be in wide-spread use? If you're looking for fairly recent breakthroughs then I think you're probably wasting your time, as 1) you'd have to expend quite a bit of effort to make your front-end compression compatible with whatever viewer people use (like browsers) and 2) if it had significant gains from current formats then it would become wide-spread fairly quickly.

---

If I'm getting down-voted I must not have explained myself very well.

Thinking that web comics are in some special domain because they're hand-drawn or have lots of color repetition is a bit silly. Finding large blocks of the same color is one of the absolute basics of image compression.

Get yourself a good graphics program, and using your specific image, see which of its export formats yields the smallest image size while retaining the quality you desire. It is going to be different for different images.

Answer 5

A completely different approach would be to render the comic images using a vector format like SVG. That would capture the essence of the drawing (fill here, arc here, line here, etc) without having to try to raster-compress the resulting images.

Answer 6

You may want to cut down on how many colours you are encoding in your image. Try saving your comic with only 256 colours and watch the size decrease a lot. Depending on your specific drawing style, that me be enough.

Answer 7

A few things I've picked up on doing images for web use -

• Use jpegtran -optimise on JPEGs - it recompresses them losslessly and can shave a good few percent off poorly compressed images.
• I run PNG files through pngnq (make them 8 bit) and then optipng -i0 (recompress and remove any interlacing). I know you said you don't like lossy, but pngnq does an amazingly good job of converting images to a palette - best thing to do is try it yourself and see if the output is good enough.

Answer 8

Between anti-aliasing and gradients, there are probably more colors in the image than you think.

Answer 9

Your assumptions aren't borne out by my data. My favorite webcomic is already distributed as PNG. Converting a 167K PNG file to JPEG using the default compression quality yields a 199K JPEG file. Break-even is somewhere between -quality 60 and -quality 65, which is quite a low quality for a JPEG. So, Questionable Content is already compressed lossless and smaller than JPEG.

Answer 10

Under certain circumstances, JPEG images will be larger than PNG images.

For example, in cases where there is a very simple image, PNG may end up compressing the image better and giving better image quality.

Here's an example with some Java code:

public static void main(String[] args)
{
    BufferedImage img = new BufferedImage(
            256,
            256,
            BufferedImage.TYPE_INT_RGB
    );

    Graphics g = img.getGraphics();

    g.setColor(Color.white);
    g.fillRect(0, 0, 256, 256);
    g.setColor(Color.black);
    g.drawLine(0, 0, 255, 255);
    g.drawLine(255, 0, 0, 255);

    try
    {
        ImageIO.write(img, "jpg", new File("output.jpg"));
        ImageIO.write(img, "png", new File("output.png"));
    }
    catch (IOException e) {} // Don't usually ignore exceptions!

    g.dispose();
}

The above code produces an image with the dimensions of 256 x 256 pixels, and draws two intersecting diagonal lines in the form on an "X".

The 256 x 256 image was used to keep the image size to an multiple of 8, as JPEG compression performs a 2D DCT transform on 8 x 8 pixel sections of the image. By keeping the image size and location of the line to align within the 8 x 8 pixel section, it will reduce the amount of compression artifacts and improve the quality of the image.

(Choosing 256 x 256 was empirical -- I at first used 100 x 100 and noticed that the JPEG image was horrible, so I tried 64 x 64 and it looked better, so I made it larger to simulate a more realistic image size.)

After drawing the image, the program generate a JPEG file and a PNG file. (The Java ImageIO library uses the default compression ratio of 0.75f for the compression quality of the JPEG.)

Results:

output.png : 1,308 bytes
output.jpg : 3,049 bytes

Taking a look at the image itself, the JPEG has a little bit of artifacting, but it wasn't very noticeable until I zoomed in with an image editor. Of course, the PNG image is lossless, so it was an exact representation of the original.

To conclude, whether an image is smaller with PNG or JPEG is really up to the source -- there are cases where JPEG can be larger than a PNG and yet the PNG can be better quality. Of course, in practice, generally PNG will be larger than JPEG for a given image.

Answer 11

I think the missing piece of information here is Image Compression is Tied to the Format. It's certainly possible that someone could come up with a compression algorithm that was/is well suited for the kind of images that web cartoonists create. However, once you took the new uber-comic-image format and emitted a PNG, JPG or GIF, the color information would be subject to the rules of the PNG, JPG or GIF compression mechanism and you'd lose all the benefit of your new image format.

Here's another way to think about it.

1. Save a photo as a low quality JPEG
2. Note the file size
3. Take that low quality jpeg and save-as a 24/32 bit PNG
4. Note the larger file size

The same thing would happen to this mythical uber-comic-image format.

The alternative would be getting the major browser vendors to support uber-comic-image nativity. I'll leave the reasons behind that not working as an exercise to the viewer.

Answer 12

As someone who has done a lot of colouring work for cartoons, as well as photo-manipulation work I can safely say that there is often a lot going on inside the average web-comic when compared to a normal photo.

Assuming that the image is done in Photoshop or Painter (usually from a Tablet) there are often a number of filters or layers at work in the average web-comic. Shading, reflection, opacity, background images and far more come into the equation and with many of these being straight from filters or layer overlays there are often many colours in place.

A lot of the time you have to think of your audience. It is really worth optimising your images if you get 20 visitors a day? I'd probably argue that it is completely down to the size and content of your web-comic. If you can get away with PNG then I'd stick with it. More often than not in web-comics there is little going on to warrant using JPG.

Answer 13

I use OPTIPNG to get the best filter (with a sane level) and then I run ADVDEF -4 -z
http://advancemame.sourceforge.net/comp-readme.html (Not Advpng because Advpng removes the filters) to optimize the deflate.

Also you can try pngout http://www.advsys.net/ken/utils.htm Has a plugin for Irfanview. It uses the same deflate implementation of Kzip, which is usually even better than 7-zip but much slower.

EDIT:
okcancel20031003.gif http://stackoverflow.com/questions/84556/whats-your-favorite-programmer-cartoon?answer=94658#94658 256 colors 147KB
PNG (Paint) 126KB
PNG (Irfanview) 120 KB

PNG (Irfanview) +
Optipng -o5 120KB (525 bytes smaller) 9s
Optipng + ADVDEF 114 KB 9s+0.9s
PngOut 114 KB 6s

BMP 273 KB

BMP +
7z (LZMA -fb 273) 107 KB
RAR (Best) 116 KB
BMF -S 90 KB 0.3s
Paq8o10t -4 79 KB 35s

Answer 14

I've drawn a number of large hand-illustrated circuit diagrams which I scan in as grayscale for use in computerized documents; LZW-compressed TIFF always wins hand over JPEG, both in viewable quality and file size, I think because TIFF can take advantages of RLE encoding for whitespace. I'm not sure whether PNG can do this too, or whether RLE can be extended for multicolor images & not just black/white.

edit: I just tried one of my grayscale hand drawings; TIFF can beat PNG by about 2:1 (43K vs. 83K using ImageMagick convert to go from original TIFF -> PNG -> TIFF again to double-check that ImageMagick is producing both file formats and ensure that my original program didn't do a bad job producing the TIFF) but only because TIFF uses 8bits/pixel (grayscale) and PNG uses 24bits/pixel (RGB).

edit 2: never mind, I just was able to use pngcrush -c 0 to ensure the image is grayscale. PNGcrush got the RGB version down to 67K and the grayscale down to 34K. Nice!

edit 3: Just a point of procedure: It seems to me that it would make a heck of a lot more sense to pick a number of different images of this type to choose as standard benchmarks, and just try different techniques across the benchmark set, rather than just a bunch of stack-overfloids pontificating. This seems like a problem that needs a well-tested empirical solution.