So you’re done making a page for your webcomic, great! Now you just have to export and upload it. You have various image file formats to choose from when exporting your comic; but the question here is, which one is the best? Don’t worry, we won’t get technical! Opinions vary, but I believe that most will agree that the format:

  • Should have the smallest file size possible – Not everyone has fast Internet! It also helps to keep file sizes low, particularly if your web host or server has storage or bandwidth limits.
  • Should preserve most, if not all of the art quality – After all, you don’t want to lower the quality of the comic you’ve worked so hard on!
  • Is compatible across major web browsers and mobile devices – If people can’t see the comic, then what’s the point?

We’ll concentrate on the two most popular image file formats used in webcomics: JPG/JPEG and PNG. I’ll use page 71 for the examples below.

JPG/JPEG

jpg 100

JPEG at 100% quality (400KB), progressive (352KB)

JPG is mainly used for photos, but it’s still a great choice for webcomics. Even then, I suggest using this only if you make photocomics, if your comic page has photographs in it, or if you don’t care about the dirt/artifacts that come with this file format. It may also be a good choice if your art style uses digital painting or has a realistic style. Other webcomics use JPEG: Girls with Slingshots, Gunnerkrigg Court and Penny Arcade. Pros

  • You can adjust the image quality in photo editing software, which lowers file size at the expense of lowering quality as well. Here’s what it should look like in varying levels of quality – 0% (15.8KB), 40%(59.8KB), 80%(109KB).
  • Most photo editors have the option to optimize it, which further lowers file size. This should always be enabled in the first place.
  • Can set to “progressive”. If progressive is disabled, JPEG files usually load from top to bottom; with progressive enabled, it will instead load the whole file at once but at the lowest quality, although as it finishes loading the quality will improve. This also lowers the file size even lower that just optimizing it. Click here to see what it should look like if progressive is enabled or disabled (image source).
  • Can blur when you export it. Personally, I don’t think there’s much use for this.
  • Very low quality JPEGs have their uses though, like in glitch art, or intentionally crappy comics like sweet bro and hella jeff.

Cons

  • Compression artifacts are the reason why you should stay away from JPEG. Check JPEGs at 0% for the most obvious example of this.
  • Even at maximum quality, your art won’t look as crisp or as nice compared to PNG although this may not be noticeable most of the time.
  • Resizing ruins the image quality. This won’t be a problem since you should be keeping your original work file anyway.
  • Does not support transparency. If you need transparency, use PNG instead.

PNG

tinyPNG page 71

TinyPNG optimized (139KB)

Another popular format and the one that I personally use. Generally a bit larger than JPEG, but more than makes up for it by preserving maximum image quality. I also consider this format superior to GIF. Other webcomics that use PNG: Nedroid, Saturday Morning Breakfast Cereal, and Questionable Content. Pros

  • No compression artifacts, which makes it excellent for presenting crisp and clean line art and dialogue.
  • Can be optimized by using PNG optimizers like TinyPNG. I use normally use OptiPNG before I made this article but it seems TinyPNG may be better; the trade-off is some dithering and slight reduction in image quality though. For comparison:
  • Supports transparency, which JPEG doesn’t. This may not be important to some artists though. For an example of transparency at work, take a look at page 37 (which uses 32-bit).
  • Can be set to 8, 24, and 32 bit.
    • 8-bit PNG is  basically a better version of GIF. Has transparency, limited to 256 colors, and a lower file size compared to GIF. Also has the lowest file size compared to 24 and 32-bit. Has the same limitations as GIF but it can’t be used in animations. Use this if you art has few colors or if don’t use gradients. Here’s page 71 in PNG-8 (167KB original, 146KB TinyPNG optimized). Notice the dithering that happens because of the 256 color limit.
    • 24-bit PNG is considered the standard or middle ground of the three. It is not limited to 256 colors. Depending on the image editor, you may or may not be able to export the image with transparency on. Here’s page 71 in PNG-24 (396KB original, 139KB TinyPNG optimized).
    • 32-bit PNG is what I usually use. Has transparency although it also has the largest file size, but when optimized, has a lower file size than an optimized 24-bit PNG file. May not be available for older versions of image editors however.

Cons

  • Can’t adjust quality, although this isn’t a problem if you are more concerned about quality than size.
  • Usually has the largest file size, that is, if you didn’t optimize it. Always optimize PNG files.

Other image formats

GIF – Forget GIF, use PNG-8 instead since it has most of its features, as well as having lower file sizes. GIF is more compatible with older browsers, although this shouldn’t be a concern. Oh, and it’s also the only image format that allows animation, so use this if you want to make some small animations.
BMP – About the same quality as PNG, but the file size is huge (page 71 in 32-bit BMP is 2.25 MB!). Compatible with a lot of devices, but I don’t suggest using BMP only for this. The only advantage I see when using this format is it has a lower file size (lower than PNG) if compressed using ZIP, so you can use it for storing multiple images.
Flash or .swf – Not exactly an image format but I and other artists use it, so I’ve decided to include it here.  Has a really low file size (most of the time), can add sound and interactivity (if you know how to use Actionscript), and allows you to create animations, so it’s an excellent format if you don’t mind that some of your readers may not be able to see your comics/animations since it requires the free Adobe Flash Player plugin. Here’s an example.