InsaneJournal

Tweak says, "I think I'm ADORABLE!"

blackline_mod (

blackline_mod) wrote in

rp_tutorials,
@ 2009-06-17 13:53:00

Image types, what to save as and why!

Saving images can be confusing for a lot of people. If you have Photoshop, Paint Shop Pro or Gimp, you are provided with tons of options for how to save your images, most of them with strange extension names which generally don't make much sense to any of us. If we get to the happy save for web option, we still have three main types that are used: .JPEG, .GIF and .PNG which is still a confusing list of choices for most of us. Want to know which file type is right for your graphic? Read on!

I am going to make this lesson as short and sweet as possible and then provide links to places with much more in-depth, technical information, because let's face it, I can toss around terms like "Joint Photographic Experts Group" and it's not going to mean beans to most of us. The biggest thing to remember with web graphics is that you want it to look as good as possible while making the file size as small as possible so it will load quickly. A cool image is suddenly not so cool if you have to wait a minute and a half for it to load. Each file type is better at saving one kind of image than the others, though this is in the process of changing, which I will explain at the end of the article.

First off, .jpeg vs .gif.

.JPEG is a good choice for saving images with lots of complex colors or tonal changes, and can support up to 16 million colors. That's a lot of colors. Basically, .jpeg is a good choice for saving photographs, illustrations, most of the things we use for advertising graphics or PB graphics.
.JPEG is a bad choice for saving images which are mostly text or line art, as it will not effectively save a crisp/clean line, and will often produce 'artifacting', or those little blotches of slightly distorted color around a line.

.GIF is your only choice for saving animated images. .GIF is also a good choice for saving images which are mostly text, for things like text headers, website buttons, and lineart. This is because it is a lossess saving system and will produce crisp, sharp lines and no artifacting. GIF also allows for saving images with transparency.
.GIF is a bad choice for saving photographs or images with complex colors, as it can only support 256 colors, so trying to save a photo will result in squares of the same color, rather than a nice smooth transition from one color to the next. Also, the color you see before you save a .GIF may not be the exact color after you save it, depending on if .GIF supports that color or not.

In more recent Internet history, a third option has entered the ring: .PNG.
.PNG is a new format developed as an alternative for .GIF. .PNG almost always compresses images to a smaller size than does .GIF. It can support Alpha Channels (a special kind of transparency) and transparencies and has become a favorite saving format for icons, which usually have a smaller color pallet. This is the saving method of the future, simply put. Sounds like the ideal saving method, right? Sadly, this is not entirely true.
.PNG is still considered a 'new' saving method and some browsers do not support it, which causes transparencies to not truly be transparent. Also, some coding/sites will pick up the Alpha Channel and give your lovely transparent image a solid black background with an ugly, jagged outline. Note that this is some and not all, and most browsers do now support .PNG, so it is generally a pretty safe use. Just be aware that someone who has not updated their browser might see a non-transparent image if you use a .PNG.

The short and sweet:

.GIF is your only option for animations
.PNG is best for text, lineart or any image with a smaller number of colors
.JPG is best for photos and illustrations with a large number of colors or a range tone changes
.GIF is best for text and lineart

Hope someone finds this useful. :3

Want more reading? Here you go:
JPG vs GIF vs PNG
Gif vs JPG - This includes images as examples of why to use one format over the other
PNG?

(Read comments)

InsaneJournal

Post a comment in response: