You see a lot of poor quality images on various comics sites (including some of the ones on this one!) Here are some things to think about when getting your art ready to present on the web.

BITMAP VERSUS VECTOR

A lot of people don’t know the difference between bitmap and vector image files.

Bitmap files contain color information about every single pixel in an image. Popular bitmap formats are .jpg, .gif, and .png. Adobe Photoshop is a program that primarily works with bitmap art (although they are combining it more with vector art in the newer versions). These images can be scaled downwards.

Vector files contain mathematical coordinates for the points and lines and other information that an image is made out of. The only really popular vector format I know of is .swf (shockwave flash). Adobe Illustrator is a program that works primarily in vector art. Vector art can be scaled upwards or downwards without losing quality.

A BRIEF OVERVIEW OF THE FORMATS

.bmp

These are bitmap files… they have all of the information about every pixel of your image uncompressed. These make good, high quality source files, but you will never want to publish them to the web, as they are large files, and will take too long to download.

.jpg

Probably the most widely used format is the .jpg (it is the format most digital cameras take pictures in). It is good for some things, but not for others. It is a lossy format, and most bitmap editing programs will ask you how high of quality you want to save it as when you save it.

Being a lossy format, the lower the setting you choose on this, the more information you lose… you sacrifice image quality for small image sizes. You lose information in an image even saving a jpg at 100 quality, so never use jpgs for your source files.

Why would you want a lower quality image? File size. If you want an image to download quickly, the .jpg does a nice job of compressing the information. At low settings, though, your images will look muddier and muddier.

The .jpg file tends to work well for gradiated color, photographic, and greyscale images.

.gif

.Gif files are also a lossy format, so again, never use these for your source files. However rather than controlling the range of quality from 1-100 to compress, with gif files you manipulate the color palette embedded in an image. The more you limit the number of colors used in a gif image, the smaller the file gets.

The .gif format works well for black and white and flat color images with a limited color range. Also, gif files can handle alpha transparencies, which jpg files can not.

You can have animated .gif files, but these are very limited. If these are not kept very brief they can get very large very fast.

.png

There are three major web compatible formats for presenting bitmap graphics, .gif, .jpg and .png. Of those, .png is rarely used.

Why is this? I believe mostly because the format was developed later than the other two formats. PNG’s actually use most of the advantages of both .jpgs and .gifs, and improve and expand on them vastly.

I think they are compatible with all browsers too.

That said, I almost never use them except for source files (they are a lossless format)… this is probably more a force of habit on my part than anything else. Since they are a lossless format, they don’t “approximate information” of the source for the sake of compression, as jpgs and gifs do.

You can read more about the advantages of png files here, if you’re interested.

Note that the .png format was adopted as the source file format for Adobe Fireworks, which is an excellent program for preparing bitmap images for the web. It also does a very nice job of integrating vector art, bitmap art and fonts… I’m not sure if it is a default of the file format to handle vector as well as bitmap art or not, but you can do so very well with Fireworks. However, Fireworks is not the robust image editing solution something like Photoshop is (and it isn’t intended to be), but a lot of web-related stuff it handles much better than Photoshop does.

.swf

The .swf is the format popularized by the Adobe Flash Player. Swf files can do a lot of things, including complex full animation and multimedia. It is the only popular vector format used on the web that I’m aware of, although there may be others. There is a little more involved in posting these files online than there is with the other formats. However, since it is vector, you can have totally clean artwork at any dimensions, usually at very small file sizes.

SCANNING

I’m not going to say too much about scanning or image editing in this post… you can read some good information about scanning, among other things, here:

RE: A Guide to Reproduction: A Primer on Xeorgraphy, Silkscreening

I generally scan stuff at 800 DPI as a black and white bitmap for my source copy of a black and white image (if I color, it is generally done on the computer). Save this initial scan as a source file, and make alterations to it as a different file… that way you can always go back to the source if you need to.

Before altering a black and white image in scale or dimension, you’ll want to switch it to greyscale, or you’ll get some ugly, chunky pixels you don’t want.

THINGS TO INCLUDE IN ALL OF YOUR IMAGES

Put copyright information, your name and your website url in all of your images (again, this is something I have neglected on my own website, although I’ve done it a lot in my Soapy the Chicken strip… I should always do this, though!). If you put a circle c © with a date and your name, you should be somewhat legally protected from copyright infringement. Obviously, you want copyright information on your website in general, but you should have it on each individual image you want to own the copyright of as well, because your images may not be viewed only on your website.

Anyone can grab your images for free on the web, and put the images on their website. While ideally they should at least give you credit for an image, frequently they won’t. If this makes you uncomfortable, you should very carefully in considering what you make available on the web. Having your copyright on all of your images will make it so anyone using the image will have to take the significant extra step of editing the image if they want to display your image without you getting copyright credit for it.

While I’m mentioning copyright, you may also want to consider offering some of your work under a creative commons license. These give you more flexibility in defining what can be done with your copyrighted images. The Cartoonist Conspiracy publishes all of the jam comics we produce online using a Attribution-NonCommercial-ShareAlike 2.5 license that allows people to reuse the content from them in certain situations. Read more about creative commons licenses on the creative commons site.

IMAGE SIZE

When deciding what size and dimensions to make your images for the web, consider the nature of the computer monitor. Some people still view the web on computers that only display 800×600 pixels. I tend to think anyone viewing the web at this size is pretty used to scrolling around to find the information they want. However, you may want to generally try to keep your web-posted images under 750 or so pixels wide anyhow to be accommodating… it will keep your file sizes down as well.

If you are making artwork specifically for the web, you may want to consider formatting it horizontally (like a comic strip) rather than vertically (like the traditional vertical comic book page). That way people will be more likely to be able to see the whole strip on their computer monitor at once.

That said, you do have an “infinite canvas,” if you want it… just keep in mind some users may not have patience for a lot of scrolling, if you care. I tend to think most people prefer the traditional & more passive “clicking to the next page” rather than “scrolling to the next part” (which can also take a lot longer to download, since you are loading more images on to a single page).

If you aren’t one of the majority of web users cursed with short attention spans, there have been some wonderful comics done exploring the infinite canvas concept, and it is definitely an area ripe for more exploration.

FILE SIZE

I mention above how some of the formats do a good job of compressing images down to a reasonable file size. File size of your images and all of your files online is an important consideration when you consider both how long it will take your users to download an image and how much of your bandwidth allowance you are going to use up.

That said, small files are somewhat less relevant than they used to be… more and more people have fast connections, and most cartoonists won’t dent their bandwidth allowance if they have a good hosting provider like Dreamhost (although really popular cartoonists might if they have heavily trafficked websites).

I believe having high quality images is more important than having small file sizes… although you don’t want enormous file sizes either. I wouldn’t generally go much below 80% on a jpg you’re publishing, and you probably won’t be happy with most .gif without at least 32 colors in your palette… the amounts on these things will vary with different images depending on how much information they contain, though. Try exporting versions of a graphic at different sizes and compare them… gradually you’ll get a feeling for the quality levels you want to shoot for.

If you’re posting a really large image, just save a small preview “thumbnail” version that links to your main image, or state the file size on the link that leads to the image.

NAMING YOUR FILES

Consider how you name your files carefully before uploading them. First of all, NEVER use uppercase characters, spaces or special characters… these will give you all sorts of headaches. If you feel like you need a space, use an underline _ instead.

I’d recommend trying to use a consistent naming structure for your files so they will be easy to find and know what they are… don’t be afraid of long names! Here’s an example of a good naming structure…

comics_funnycomics_ep01_p001.jpg

This structure breaks down four different components of an image in the name. Comics can be the main subject, funnycomics could be the name of a project, episode01 could indicate that it is the first episode of the comic, and p001 indicates the page number of the image.

Numbering with zeroes at the start of your numbering, as with 001, 002, 003 makes it so you have a consistent number of characters in your names up to page 999. I’ve found this useful in some situations where I know how many digits are going to be in the highest number page or item. It works for me, anyhow.

Use whatever structure works for you and makes sense for the image.

SOFTWARE

I use Adobe Photoshop, Adobe Illustrator, Adobe Fireworks and Adobe Flash for various image editing tasks. These all cost money, unfortunately, and cartoonists don’t generally work with a big budget.

Fortunately, you can probably find free software out there if you look for it. One well-known, widely used free image editing program is GIMP. I’ve never used it, but I’ve heard good things about it.

IMAGE HOSTING AND FTP

OK… you have your images ready to post. What now?

There are a huge number of free image hosting solutions, as I mentioned in the previous chapters of this article… Flickr is a well-known and flexible one, although they require you to have more “photographic” images than drawings or other art (don’t ask me why they have this brain-dead policy, I have no idea). Posting a question about this on the Cartoonist Conspiracy or Comics Journal message boards will probably get you a lot of advice. If you are going to use an image hosting site, MAKE SURE TO READ THEIR LEGALESE before posting anything to confirm that you will retain all rights to your artwork.

Ideally, you have your own web space somewhere you can upload (FTP) files to (FTP stands for “file transfer protocol”). If you have a modern version of windows, you can type the name of the ftp site (like ftp.yoursite.com) into the “address” box of any window and it should bring up a login for the ftp site for you to put your user name and password in. This is nice, because you can then treat the folders on your site pretty much like any other folders on your machine.

If this doesn’t work for you, there are a lot of free FTP programs out there. Filezilla is an excellent one.

Put all of the images on your site in a folder called images. You can add sub-folders with images by project or subject in your images folder as well (which I also recommend). Putting all images in your images folder will go a long way towards keeping your website files neat and orderly.

Previously:

HOW TO GET YOUR COMICS ONLINE PART ONE: Advantages and Disadvantages of Putting Your Comics Online

HOW TO GET YOUR COMICS ONLINE PART TWO: Publishing Options, and the Necessity of RSS Subscriptions

Next: Presenting Yourself Online