Subscribe

Webcomic Image Formats

A common mistake I see in webcomics are image files that are saved in an incorrect format. Choosing the correct image format, or filetype, for your webcomic is dependent on the content of your image. Ideally, you want to have an image that has the lowest file size possible, while retaining the best image quality for the artwork. You can see the three most common web image filetypes in the quick reference chart below.

Filetype Compression Transparency Comments
Web Image Formats - PNG Good compression and good image quality overall Complex transparencies  Ideal for typography, solid lines & colours
Web Image Formats - JPG Best compression at the expense of image quality No transparencies Ideal for photographs and gradients
Web Image Formats - GIF Okay compression, using more colours increases filesize Simple transparencies The only format that allows animation

.PNG

PNGs are a relatively new image format that has two variants, PNG-8 and PNG-24, based on the variety of colours you can use. PNG-8 is limited to 256 colours, but comes a lower file size; PNG-24, on the other hand, can have up to 16 million, but with a higher file size. Both variants, unlike GIFs, support full alpha (complex gradient) transparencies. PNGs handle solid colours and edges very well, so if you have a lot of text, lines, blocks of colour and no transparency, you want to save your comic as PNG-8 every time.

Web Image Formats - PNG-8 ExampleWeb Image Formats - PNG-24 Example

.JPG

JPGs, or JPEGs, are the most common image format on the web today and is primarily used for photographs. In the realm of webcomics, you should only be using JPGs if your artwork has lots of gradients or painted colours and little to no text. The reason for this is that JPGs do not handle edges very well, and you tend to see artifacts (image compression errors) in all but the highest-quality JPGs. On the plus side, JPGs boast the most effective image compression of the three file formats, although you will have to sacrifice quality in order to achieve lower file sizes.

Web Image Formats - JPG-0 ExampleWeb Image Formats - JPG-80 Example

.GIF

GIFs were the standard for images with transparency, solid colours and lines before the more advanced PNGs rolled around. They don’t compress as well, have limited colours (unless you want a file hundreds of megabytes in size), and simulates complex transparencies with a method called dithering, which doesn’t look good at all. Nowadays, the only reason you should ever be using a GIF is if you are creating an image with multiple frames — an animated GIF.

Web Image Formats - GIF ExampleWeb Image Formats - GIF Dither Example

Conclusion

In this day and age where just as many people are reading comics on their phone as they are on their desktop computer, image quality and file size has never been a more important issue. Keeping your file size low and your image quality high is going to be a constant juggling act, but as long as you know what to look for — solids vs. gradients — you shouldn’t have a difficult time deciding which format to go with.



7 Comments

  1. Comment Hidden
    nox.fox 2 years ago

    I think we can never stress enough how important file compression is. So people, whenever you make a pic to upload on the web > Save for the web and devices! (ctrl+shift+alt+S in Photoshop)

  2. Comment Hidden
    Zib Periwinkle 2 years ago

    This helps alot, looking back all my comics are in JPG and I now hate it

  3. Comment Hidden
    AmberRose 2 years ago

    I’m not sure which I should use basicly. My comic consist on solid black lines, with lots of text. But I use of lots of gradients as well. Currently I’m using I think jpg. But with the day an age of tablets and smart phones I’m a little lost on what formats are the best because I don’t own one of these devies so I really can’t see how my comic appears on such screens.

    0 0
    • Comment Hidden
      Enzo Cheer Up, Emo Kid 2 years ago

      Hmm. In your case I would do a test, and save a page of your comic as both a JPEG and a PNG. Then, adjust the quality of the JPEG incrementally until you reach a point where the filesize is low, but the quality is still acceptable to you. Then compare it to the PNG. Which one looks better? Which one has a smaller filesize? It’s all about balance and what you personally feel comfortable with too. If you’re still in doubt, though, just stick with JPEGs, since PNGs don’t really allow you to adjust the quality as much as JPEGs do.

  4. Comment Hidden
    lyon Bent Pins 2 years ago

    I’ve definitely been falling into a trap of sticking to PNG when I should realistically be using JPG for some of my comics. Some pages wind up pretty much requiring I use PNG-24 to not lose too much color data, and then I wind up with an image that’s up to 2MB – Not good at all. I guess I’ve this irrational fear of JPG for so long because when I was younger, it’s all I knew, and it always looked terrible. This was a good read (plus the tapastic comic on the same subject), its definitely alleviated the fear I had.

    Thanks for writing this!

    0 0
    • Comment Hidden
      Enzo Cheer Up, Emo Kid 2 years ago

      Thanks lyon, I’m glad it helped! Yep, PNG-24s are beautiful but they get really heavy unfortunately. One solution that I’ve been loathe to try myself to get around huge files is to break up the comic into several smaller images. The reason I dislike that is because it’s harder to share multiple images. It almost seems like the direction we’re all inevitably heading in though, with mobile & tablet browsers becoming more popular.

      0 0
    • Comment Hidden
      lyon Bent Pins 2 years ago

      Yeah, that one’s had me especially hesitant because most of my page layouts vary quite a bit, and of course there is the fear that someone will share one of the images on its own, and it’ll circulate like that as a half-joke, with no watermark (unless I watermark each image, which would get noisey).

      When I post things to tumblr, especially the longer ones, I do wind up having to break them down into smaller images just so tumblr doesn’t automatically shrink down the larger page, so maybe it’s something I just have to get more used to