JPEG vs PNG: Choosing an image file format for your webcomic
Update 8/20/2023: Cleaned up and added info about WebP. This page seems to be getting a lot of views for some reason. You’re not bots are ya? 🤨
Done making a page for your webcomic? Great! Now it’s time to export and upload it. You have various image file formats to choose from when exporting your comic; but the question is, which one is the best? Most should agree that the best image format for artwork…
- Should have the smallest file size possible – Not everyone has fast Internet and most people are using mobile devices to browse nowadays. Low file sizes also help with server storage and bandwidth limits.
- Should preserve most of the art quality – You could export it as a pixellated mess, but why?
- Is compatible across major web browsers and mobile devices – If your reader’s browser doesn’t support the file format, then they can’t read it. Not much of an issue these days.
With these in mind, it’s why the whole world still use JPEG and PNG.
JPG/JPEG
JPEG was originally created for digital photos, but it’s still a great choice for webcomics and what I mainly use nowadays. Other webcomics use JPEG: Girls with Slingshots, Gunnerkrigg Court, and Penny Arcade. Pros
- Adjustable image quality, which lowers file size at the expense of lowering quality as well. Here’s what varying levels of quality look like – 0% (15.8KB), 40%(59.8KB), and 80%(109KB). Personally, I use 90%.
- Most photo editors have the option to optimize it, which further lowers file size. This should always be enabled in the first place if available.
- Can be set to “progressive”. If progressive is disabled, JPEG files 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. Enabling it also reduces the file size even lower than just optimizing it. Click here to see what it should look like if progressive is enabled or disabled (image source).
- Low-quality JPEGs have their uses like in glitch art, memes, 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.
- Your art won’t look as crisp or as nice compared to PNG even at maximum quality, although this may not be noticeable depending on your quality settings.
- Resizing ruins the image quality. Not much of a problem since you should be keeping your original work file anyway. You… did keep them right?
- Does not support transparency. Use PNG instead if you need it.
- Third-party websites may convert and optimize to JPG even if you upload a PNG file. Heck, they may even optimize an already optimized JPG, further reducing quality. Nothing you can do about that except use another website or start your own.
PNG
PNG is another popular format and the one that I use for HD artwork. Generally larger than JPEG, but more than makes up for it by preserving maximum image quality. 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 with PNG optimizers like TinyPNG. I normally use OptiPNG before I made this article but it seems TinyPNG may be better; the trade-off is some dithering and a slight reduction in image quality. For comparison:
- Original PNG (no optimization): 419KB
- OptiPNG: 328KB (what I used for page 71)
- TinyPNG: 139KB
8/20/2023 update: I now use PNGGauntlet since I’ve moved to JPEG for public posts, and PNG for my commissions/patron HD artwork. It’s a downloadable app that combines three tools to losslessly optimize PNGs. It’s heavily reliant on CPU when using it.
- Supports transparency, which JPEG doesn’t. May not be important to some artists. For an example of transparency at work, take a look at page 37.
- Can be set to 8, 24, and 32-bit.
- 8-bit PNG is a better version of GIF. Has transparency, is 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 your 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.
Cons
- Can’t adjust quality when exporting although this isn’t a problem if you are more concerned with quality than size. Some PNG optimizers may have quality settings, with higher quality taking longer to optimize.
- Large file size 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. It’s one of the only image formats that allows animation, so use this if you want to make small animations.
APNG –Â Animated PNG. Same pros/cons with PNG, but it’s animated. Better quality than GIF without the dithering, but file support can be iffy.
WebP –Â Consider this the same as JPEG, but with even smaller file sizes and can be lossy or losslessly optimized. Even so, I don’t recommend exporting WebP since third-party websites probably don’t support uploading it in the first place. Don’t worry about it using this as websites like Twitter (I refuse to call it X lol) automatically optimize and convert uploaded images to WebP. I actually use WebP here in Cat Nine, but a plugin (EWWW Image Optimizer, highly recommend!) automatically does all the optimizing and converting for me while preserving the original image.
BMP – About the same quality as PNG, but the file size is huge (page 71 in 32-bit BMP is 2.25 MB!). An old format so it’s 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 supported anymore! 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.
hi
hullo
wht you doing
Uber22 Oh my, you’re right! I really like the comparison between the original file (which I do anyway), plus it also optimizes JPEG as well.
There’s a better optimization tool for PNG: http://optimizilla.com