HOW TO: Finding the right image file to save with using IrfanView

[fesworks]

A handy guide I hope to expand to show multiple comic styles in various image extension and saving options.

I utilize IrfanView because it is the awesome-est image saver for quality and size. I get better results than saving from Photoshop. I usually open my original files and PSDs in IrfanView and resize and save that way.

I've been using IrfanView for over 10 years.

http://www.fesworks.com/irfanview/

[Xepher]

Hey, pretty spiffy. Good to have a reference for examples specific to comic use. I would make a couple of technical notes about your guide though, so please don't take offense.

GIF... you should really point out that GIFs are technically lossless. The reason they don't look like the original image though is that they're limited to 256 colors. But you can cut and paste pieces around a gif image all day, and save again and again (as long as you're not adding/changing colors), and it doesn't lose more quality (unlike JPEGs) It's the color loss/limit that makes them so ugly, but for black and white (or grey) 256 shades of grey is plenty. The weird pixelated effect you get in GIFs is called "dithering" and it's when a program tries to fill in intermediate colors. E.g. trying to make a shade of blue-green by putting a green pixel next to a blue one. I always hated it, so I either manually reduce my images to 256 colors when I'm making them, or opt for PNG or JPG.

PNG is lossless, and as such, there's no reason you should really ever use less than the maximum compression. The visual result will always be identical. The higher compression only uses up more CPU to display it. That was a problem on 486 PCs when PNG was first introduced, but not on modern machines. Part of what makes PNG so useful is that you can't go wrong with it. Just set maximum compression and your image will look perfect every time. PNG also supports true transparency, so stuff on a page can blend with the background. That's really not useful for comics, but comes in handy for other web design. The xepher.net logo on the main page is an excellent example, as (in firefox or other good browsers at least) you can see how the shadows blend perfectly as you scroll.

PNG actually supports different color depths too, so you can set it to 256 colors just like GIF images are, and get equally small file sizes (with ugly, dithered colors too.) PNG also has a lot of other options that most people won't need, like interlacing, and different compression algorithms. BTW, your example PNG page links the level 6 image for both level 6 and level 9 examples.

[fesworks]

Thanks for the extra info! Next time I update it I'll revise a few things!

[Databits]

Actually I think the only browser that I can think of that's still somewhat in use now days which doesn't support PNG transparency is IE6. Outside that you're pretty much totally safe using it.

[Miluette]

I loooove PNG transparency.
Saving high-quality transparent png files with Photoshop is one of my issues though. They're huge. png-8 looks crappy around the edges, but png-24 is nice and smooth... hence my dilemma!

So if I save them with Irfanview they won't be crappy and will still retain their nice-edged quality?

[fesworks]

I'm not sure, I have not dealt with PNG transparency before.

[Xepher]

The png-8 is the 256 color mode I talked about above. It's gonna be as ugly as gifs for most things. PNG 24 (actually 32 when you include the alpha channel) is what looks nice, but since PNG is lossless, it's almost always going to be larger than a JPEG of the same resolution. There are some programs out there that can help minimize PNG file sizes though. The one I use most is pngcrush, which basically just takes an existing PNG file, and tries about 120 different ways to compress it, then goes with the best one. If your PNG was saved by a crummy program, it can shrink 'em another 10% or so, but if you're already using photoshop, you'll probably only get a 1 or 2 percent improvement. That said, the only thing to really do is manually reduce the complexity of an image. If you have a big block of pure white, that's going to compress a lot more than a big block of almost-white blotches.

For example, http://xepher.net/banners/users/max0n-box.png is 23.3KB and http://xepher.net/banners/users/crescens-box.png is 58.8KB. The second image SHOULD be simpler, as it has no color, and only a small drawing, but you'll see that it's using "screen tones" (hatching and dithered colors) rather than just shades of grey. This makes the image size way larger. Basically, make good, clean images, and they'll shrink down a lot smaller than anything with noise or texture in it.

[Databits]

Generally I've found that GIMP is able to do some nice compression with PNG's as well.

[Miluette]

So it's really no surprise my pngs are huge, since I'm saving them from pretty high quality/detailed files, lol.

In this age of high speed, though, it's worth it. Not like there's much on my websites besides pictures, anyway.