[Tutorial] Uploading and Compressing Images; Using Color Modes

[Wedge]

This is the expanded edition of my tutorial here. I decided to turn it into a complete topic at the recommendation of Afkpuz. New features include information on dithering, random facts, a list of some free image editing software and instructions on how to upload images. I feel that this topic would probably be more appropriate pinned to the top of the gallery, but it is here for now for review. I would have posted it in off-topic but it would have probably disappeared quickly.

It's an interesting read and you'll probably learn something. Feel free to skip the short section about uploading images.


How to Upload Pictures and Put them on the Forums
1. Go to www.imageshack.us
2. Click browse.
3. Upload a file.
ex: C:\Documents and Settings\My Documents\paintguy.png
4. Click "Host It!"
5. A bunch of links will appear, if your image is large enough a preview and thumbnail links may appear too.
6. Select the text next to the box labeled "Direct Link to Image"
7. Copy and paste it into your post.
ex: http://img375.imageshack.us/img375/8023/paintguywm9.png
8. Now put image tags around it. Select the text, and click the img button towards the top of your reply box.
ex:


How to Decrease Image File Size
There are a lot of ways you can shave off excess file size.

Code: [Select]

Tip:
These boxes indicates interesting notes, facts, and tips for working with images. You should probably read these.
1. Make it smaller. A 1280x1200 screenshot would work just as well as a 800x600 screenshot, although it starts to become more difficult to read text. However, there is little harm in making game screenshots 800x600, 640x480, or even smaller. A good program for resizing images is Microsoft Office Picture Manager. If you don't have a copy of Office, you can try using GIMP or Photoshop.

2. Crop it. You can even do this in Paint and still get excellent results. The idea behind cropping is to take out the bit of an image you don't want to show. For example, if I were to post a picture of someone holding a Dr. Pepper, and I only wanted to show the can, I would crop out the person, the background, and everything else besides the can.

Cropping Tutorials:
Paint
Photoshop
GIMP

3. Don't save as a .BMP file. They are not compressed. Export it in either .PNG or .JPG formats. You can use .GIF format too, but they can only be exported in indexed color mode. See number 4 for more details.

4. Export your picture using indexed colors rather than RGB. Pictures are usually exported in 24-bit color mode. Indexed mode is 8-bit color or 256 colors. You may recall running programs in 256 color mode before, and noticed how it distorts your desktop. However, you can tweak the color palette, so if you take a picture of a blueberry, the palette will use 200 shades of blue, and not 8 shades of blue because it's palette also contains 8 shades of red and green that you aren't using. This is called an adaptive palette.

Code: [Select]

Tip:
You can also force even lower color modes, such as 6-bit (64 colors) and 3-bit (8 colors). Again, you can tweak the color set (some programs will do it automatically for you). You'll be amazed at how many images can be drastically reduced in size while still maintaining color quality, even with few colors.
Color Indexing Tutorial for GIMP

Here is a lovely comparison for your viewing pleasure.

24-bit (13.6kb)


8-bit (5.70kb)


6-bit (3.91kb)


3-bit (2.18kb)


Dithering
Dithering uses clusters of pixels to approximate colors that are not in the palette. Use it if you want to retain more color information at the cost of detail. Below are examples of Dithering and Non-Dithering 3-bit images.



See the difference? Ok, here is a quick test, which uses dithering and which doesn't?



The one on the right uses dithering. You can tell because the one on the left forms into bands. This effect is called banding. Banding isn't always bad, a post-processing effect called Posterization utilizes this.

File Size and Color Number Relationship
Here is a graph showing the relationship between the palette size and the image size. The Y axis is the size in kb, the X axis is the number of colors. The X axis is a logarithmic scale, so the value 7.224719896 should be read as 10^7.224719896 or 16777216.00248981664792046490 4922 colors. It's actually 16777216, the crazy decimal places are caused by rounding errors.

Code: [Select]

Fun Fact:
This graph shows proper cropping, resizing, and color optimization. It is only 3.88kb.
As you can see, the drop from 24-bit Truecolor to 8-bit 256 color is the most dramatic. After that, the decrease in file size, while present, is much dramatic. You may recognize this as the law of diminishing returns if you've ever taken an elementary economics course.

In other words, you have the most to gain by using 256 colors in any image that either maintains good color quality when it is indexed or does not require much quality. Further reductions are only necessary on huge images (the return for removing colors in a 50MB 8-bit image are large enough to make it worth doing). The difference between a 2kb 64 color icon and a 3kb 256 color icon are negligible, and it's probably worth your time to just not worry about making it that much smaller. However, since it takes the same amount of time to make an image 8-bit as it does to make it 3-bit, if you already know you only need 4 colors, you might as well export it as a 3-bit image and save someone .0003 seconds downloading it.

Random Facts

• A picture really is worth a thousand words. A low-resolution picture is roughly equal in size to 50 pages of typed text.
• In the file size limit on the Blockland forums, you can fit approximately 52428 words, 256 pages of text, 50 encyclopedia pages, half of a short novel, a half-minute mp3, or 3 seconds of video. 
• Dithering comes from the Middle English verb 'didderen,' meaning 'to tremble.'
• You can calculate the number of colors on a display by taking 2 and raising it to the power of it's bit depth. For example, a 3-bit image uses 2³ or 8 colors. 16-bit images use 2¹⁶ or 65536 colors.
• Textures used in Blockland should not be indexed or interlaced.

Free Image Editing Software
Remember, just because you have $800 image editing software you pirated doesn't mean you downloaded artistic talent too.

Raster Graphics:
Paint.NET - http://www.getpaint.net/
GIMP - http://www.gimp.org/

Vector Graphics:
Inkscape - http://www.inkscape.org/

Have fun and stop trying to upload 50MB images.

[Ad Bot]

[laremere]

Liked the random facts, I will use those from now on when trying to explain how much file space stuff takes up.


If you want I'll do a comparison of image extensions.

[Wedge]

Sure.

[Packer]

Interesting

* Packer raises eyebrow.