| 08-20-2010, 04:11 PM || #1 |
Join Date: Dec 2009
| | How to reduce the file sizes of gifs (including making background transparent)
A file with the .gif at the end of it's name is a type of graphics file. If you are interested in animated .gif's specifically, here is a helpful introduction to them:
On the wiki and here on the forum, it is important to keep your file sizes small (usually below 100 kb). Animated .gifs are so much fun, but they can easily be too large for the forum or the wiki. (Thank you to Cocoabean and others on the wiki animation thread who has helped me understand much of this information.)
This thread has some ideas for how to reduce file sizes of animated .gifs
Before you begin, save your file with a new name so that you can have a backup version to return to if you don't like the changes you make.
1) Make the background transparent
(I will give some brief instructions on how to do this below, please add more if you know of other ways to make the background transparent)2) Crop your picture!
Make sure that you don't leave any wasted space around the part that you really want people to see3) Reduce the image size
Don't reduce the image size too small or you won't be able to see it! For avatars you want no more than 125 px x 125 px (I think). For sprites you need to be very small! 4) If it is an animated gif, reduce the number of frames
5) Reduce the number of colors used
Ideally, the file should have no more than 20 frames. Many animated gif programs and some websites may allow you to change the timing of each frame. So, if you reduce down to 2 frames, you may want each frame to appear for a long period of time. You can often pick timing from 1/100 of a second to more than 1 second per frame.
You can sometimes reduce the number of frames by deleting every other frame; for example you can do this by deleting all the odd numbered frames. By deleting every other frame, you preserve the overall flow of the movement. On the other hand, you will lose some of the "smoothness" to the animation.
Most screen captured images will start out using 256 colors, but many graphics program will let you reduce that to a "web adaptive" color palette with 128 or 64 colors or even fewer colors. . . choosing grayscale will really reduce your file size! How do you know if the background is transparent?
Typically, you know that you have background transparent because the background will have a gray and white checkerboard appearance in the graphics editing program or at the online graphics editing site. (When you upload your picture to the wi forum, the transparent background will look like whatever color the page you put it on - usually white).
How do you make the background transparent?
Answer: It depends on the online editing site or the graphics software that you have available to you. You can often google to find out how to do this on the particular site or program you use.
There is an option to make your images transparent in lunapic! The following link about sprites talks briefly about it.
Follow the link below to see how to make a background transparent using the INDEXED TRANSPARENCY in Adobe Photoshop:
Follow the link below to see how to make a background transparent using INDEXED TRANSPARENCY in Adobe Fireworks:
If you have an Adobe product (Photoshop, Fireworks, Imageready) you may be able to use the "magic wand tool" and the picture below shows specifically how to do this in Fireworks. Adobe photoshop has the magic wand as well.
TO USE THE MAGIC WAND TOOL, READ BELOW
If you are trying to make an animated gif and you have adobe photoshop, you may have to work frame by frame (and you may have to make the animated gif using an online site to link the stationary (still) pictures together- you can link several stationaly pics on lunapic, I think. Thank you to lilkinzmom7 for helping me understand this!)
= the magic wand tool
Here's an example from another product (Easy GIF) that lets you change a color you pick to transparent using a the Color Replacer Tool.
Please feel free to comment on more ways to optimize animated gifs. If you know of other ways to make the background transparent, please share that helpful information. Thank you.
Last edited by curiousg; 09-05-2010 at 09:14 PM.. Reason: adding more information
| || |