Jump to content


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.

Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo
* * * * * 2 votes

Resizing An Animated Gif


  • Please log in to reply
11 replies to this topic

#1 tg1911

tg1911

    Lord Spam Magnet


  • Members
  • 19,274 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:SW Louisiana
  • Local time:03:20 PM

Posted 15 November 2006 - 07:57 AM

Resizing An Animated GIF



Guide Overview

The purpose of this guide is to teach you how to take an Animated GIF file, and reduce the size of it.
One of the reasons you might want to reduce the size of the GIF, you have a nice animation you want to use as an avatar on this forum. For the purpose of this tutorial, let's assume the GIF is 100 pixels wide x 100 pixels high. This forum will not support an avatar that is larger than 83 pixels high x 83 pixels wide, so it needs to be resized to work properly.

An animated GIF, is a file made up of layers of images, stacked one on top of the other.
In each layer, the image is a little bit different than the previous image.
So, when each image is "flipped through" at a given speed, the image appears to move, like a flip-book.
This is a rather simplistic explanation, but that's how it basically works.

If you try to use a GIF larger than 83 x 83, the forum's software will reduce it to those dimensions. Since the software doesn't support animation resizing, the first image that makes up the animated file will be resized. It will ignore, and discard, the other images, leaving you with an image that is not animated.

This Tutorial will be broken into 2 parts.
The first part will deal with using Irfanview, to extract the frames of the GIF, then resize and convert them.
The second part will discuss the actual re-compiling, of the extracted frames.

A short Flash presentation is also available for viewing. As there are several steps involved, and the use of 2 programs, I suggest you first read through the tutorial to familiarize yourself with the process, then watch the video,
If you still have question rereading the Tutorial, should answer most of them.
The written Tutorial, will give you a bit more detail about the Resizing operation.
Animated GIF Resizing Video

Tools NeededInstructions: Part 1
  • Open Irfanview, click File, and select Open.

  • Navigate to the GIF you want to resize, highlight it, and click the Open button.
    This will load the file into Irfanview.

    Posted Image

  • Click Options, and select Extract all frames..., which will seperate the animation into it's individual frames.

    Posted Image

    This will open the Browse for Folder dialog box.

  • Select the folder you want the extracted frames sent to, and click OK.

    Posted Image

  • Click File again, and select Batch Conversion/Rename...
    This will open the Batch conversion dialog box.

    Posted Image

  • Click the dropdown arrow next to the Look in: box, and navigate to the folder you extracted the GIF frames to.
    Use the dropdown arrow next to the Files of type: box, to make sure BMP/DIB/RLE is selected.

  • Highlight the extracted files, and click the Add button.

    Posted Image

    This will add the files to the Input files: list.

    Posted Image

  • In the Output directory: section, click the Browse button, which will open the Browse for Folders dialog box, and navigate to where you want the converted files saved.

    Posted Image

  • In the Work as: section, put a tick next to Batch conversion.

    Posted Image

  • In the Batch conversion settings: section, under Output format:, use the dropdown arrow to select GIF.

    Posted Image

  • Click the Options button.
    This will open the JPEG/GIF save options dialog box.

    Posted Image

    In the GIF section, the only thing that should be checked is, Save interlaced.

    Posted Image

    Click the OK button.

  • On the right, put a check in the Use advanced options box.
    This will activate the Set advanced options button.

    Posted Image

  • Click the Set advanced options button.
    This will open the Settings for all images: dialog box.

    Posted Image

  • This is a list of what should be checked/ticked in this dialog box:
    Resize
    Set new size:
    pixels
    Set long side to: (type 83 in the box, as shown)
    Preserve aspect ratio (proportional)
    Use Resample function (better quality)

    If anything else is checked, remove the checks/ticks, then click the OK button.

    NOTE:
    These settings will remain the same, everytime you open Irfanview, unless you change them, so if you have several GIF's to convert, you won't have to reset them.

  • Click the Start button.

    Posted Image

  • You'll see the files being processed.

    Posted Image

    When it's finished, click the Exit button.

  • Close Irfanview.
That concludes the extraction, conversion, and resizing part of the operation.
That wasn't too hard, was it?
Now, on to the making of the animated GIF.

Edited by tg1911, 16 November 2006 - 08:46 PM.

MOBO: GIGABYTE GA-MA790X-UD4P, CPU: Phenom II X4 955 Deneb BE, HS/F: CoolerMaster V8, RAM: 2 x 1G Kingston HyperX DDR2 800, VGA: ECS GeForce Black GTX 560, PSU: Antec TruePower Modular 750W, Soundcard: Asus Xonar D1, Case: CoolerMaster COSMOS 1000, Storage: Internal - 2 x Seagate 250GB SATA, 2 x WD 1TB SATA; External - Seagate 500GB USB, WD 640GB eSATA, 3 x WD 1TB eSATA

Become a BleepingComputer fan: Facebook

BC AdBot (Login to Remove)

 


#2 tg1911

tg1911

    Lord Spam Magnet

  • Topic Starter

  • Members
  • 19,274 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:SW Louisiana
  • Local time:03:20 PM

Posted 15 November 2006 - 08:11 AM

Instructions: Part 2
  • Open Windows Explorer, and navigate to where you saved the converted files.

    Posted Image

  • Open unFREEz.

  • Resize the window containing the converted files, so you can put unFREEz underneath it.

    Posted Image

    If you put unFREEz on the window, and you go to select the files, it will hide unFREEz behind the window.
    When you select unFREEz to bring it to the front, it will deselect the files, so you'll end up going in circles, trying to view them both.

  • Highlight the converted files, and grab (left click, and hold the button down) the first file.

    Posted Image

  • Drag them into unFREEz's window.

    Posted Image


    NOTE:
    If you don't grab the first file, when dragging into unFREEz's window, there's a possibility of the files not being loaded in the proper order. Grabbing the first file, while dragging, will insure they are loaded properly.

  • Make sure the Loop animation box is checked.

    Posted Image

  • Set the Frame delay: to what ever value you want.

    Posted Image

    NOTE:
    This will take some "playing around" on your part. An entry of 1 (one), will give you a frame delay of 1/100 of a second, so an entry of 100, equals 1 second.
    I'll explain more about this in the following steps.

  • Click the Make Animated GIF button.

    Posted Image

  • This will open the Make Animated GIF dialog box.
    In the Save in: box, pick a place to save the new GIF.
    In the File name: box, give it the name of 1 (I'll explain this in a minute), and click the Save button.

    Posted Image

  • Open Irfanview, and make sure you can have more than one instance of Irfanview open, at a time.
    Options / Properties... / Misc. 1 tab / uncheck Only 1 instance of Irfanview is active

  • Click View, then Display options, and select Do not fit anything.

  • Open the resized GIF you just made, in Irfanview.

  • Open the original GIF in another instance of Irfanview.

  • Put the 2 Irfanview windows side by side, so you can compare the 2 GIFS.

    Posted Image

    Depending on what you set the Frame delay: at, in unFREEz, your new GIF will probably not be moving at the same speed, as the original. Here's where the "playing around" comes in.
    If your new GIF is moving slower than the original, the Frame delay: will have to be set to a lower number.
    If your new GIF is moving faster than the original, the Frame delay: will have to be set to a higher number.

  • Go back to Step #4, and repeat, adjusting the value in Frame delay: up, or down, as needed.
    Each time you have to repeat these steps, name the created GIF's in sequential order; 1, 2, 3, etc.

  • When you have an acceptable animation, delete the others, and rename the completed animation with a name of your choosing.
While reading through this, it may seem like a rather involved process, but it's not really that hard.
As you do it a few times, it becomes much easier.
Just take your time, and enjoy. :huh:

Edited by tg1911, 16 November 2006 - 08:57 PM.

MOBO: GIGABYTE GA-MA790X-UD4P, CPU: Phenom II X4 955 Deneb BE, HS/F: CoolerMaster V8, RAM: 2 x 1G Kingston HyperX DDR2 800, VGA: ECS GeForce Black GTX 560, PSU: Antec TruePower Modular 750W, Soundcard: Asus Xonar D1, Case: CoolerMaster COSMOS 1000, Storage: Internal - 2 x Seagate 250GB SATA, 2 x WD 1TB SATA; External - Seagate 500GB USB, WD 640GB eSATA, 3 x WD 1TB eSATA

Become a BleepingComputer fan: Facebook

#3 loglive

loglive

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:05:20 PM

Posted 17 August 2008 - 11:50 PM

What about the transparency? Will it be converted to a background color? If yes, how can you change it?


Post Edit:
Actually it worked like a charm after I've ticked the box to select the transparency color two times: first time when I dismounted the frames and second time when I saved the changes for the new cropped frames. Just click the color you want to become transparent with your mouse for each frame upon saving.

Thank you so much for sharing this tutorial!

Edited by loglive, 18 August 2008 - 12:07 AM.


#4 tg1911

tg1911

    Lord Spam Magnet

  • Topic Starter

  • Members
  • 19,274 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:SW Louisiana
  • Local time:03:20 PM

Posted 18 August 2008 - 12:34 AM

It will be converted to a background color.
To change it:

In Post #1, Step 11, where it says, "In the GIF section, the only thing that should be checked is, Save interlaced.", also put a check in the Save transparent color box, and a tick next to Choose transparent color during saving.

Then when you get to Step #15, and click the Start button, as the images are processed, it will display each image, one at a time.
Click the area (color) on the image that you want to be transparent.
Once you select the color on each image, you'll see the dialog box in Step#16, from that point on, follow the rest of the directions.
Your transparency should be preserved, in your final animated GIF.
MOBO: GIGABYTE GA-MA790X-UD4P, CPU: Phenom II X4 955 Deneb BE, HS/F: CoolerMaster V8, RAM: 2 x 1G Kingston HyperX DDR2 800, VGA: ECS GeForce Black GTX 560, PSU: Antec TruePower Modular 750W, Soundcard: Asus Xonar D1, Case: CoolerMaster COSMOS 1000, Storage: Internal - 2 x Seagate 250GB SATA, 2 x WD 1TB SATA; External - Seagate 500GB USB, WD 640GB eSATA, 3 x WD 1TB eSATA

Become a BleepingComputer fan: Facebook

#5 leonix

leonix

  • Members
  • 10 posts
  • OFFLINE
  •  
  • Local time:02:20 PM

Posted 03 October 2009 - 08:28 PM

How do I change the size?
This is what the forum avatar support

Note: The maximum size of your custom image is 80 by 80 pixels or 19.5 KB (whichever is smaller).

My gif avatar is 496 KB, 120 x 90.
Thank you.

#6 garmanma

garmanma

    Computer Masochist


  • Staff Emeritus
  • 27,809 posts
  • OFFLINE
  •  
  • Location:Cleveland, Ohio
  • Local time:05:20 PM

Posted 04 October 2009 - 10:19 AM

I use fotosizer:
http://www.fotosizer.com/Download.aspx
Mark
Posted Image
why won't my laptop work?

Having grandkids is God's way of giving you a 2nd chance because you were too busy working your butt off the 1st time around
Do not send me PMs with problems that should be posted in the forums. Keep it in the forums, so everyone benefits
Become a BleepingComputer fan: Facebook and Twitter

#7 tg1911

tg1911

    Lord Spam Magnet

  • Topic Starter

  • Members
  • 19,274 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:SW Louisiana
  • Local time:03:20 PM

Posted 04 October 2009 - 10:56 PM

Fotosizer will work, if it's not an animated .gif.
If it's animated, following the above procedure will help you reduce the size of the .gif

Post #1 discusses resizing the .gif images.
You can use Fotosizer after Step#3 in Post #1, if you want to, then continue on to Post#2 to re-animate it.
MOBO: GIGABYTE GA-MA790X-UD4P, CPU: Phenom II X4 955 Deneb BE, HS/F: CoolerMaster V8, RAM: 2 x 1G Kingston HyperX DDR2 800, VGA: ECS GeForce Black GTX 560, PSU: Antec TruePower Modular 750W, Soundcard: Asus Xonar D1, Case: CoolerMaster COSMOS 1000, Storage: Internal - 2 x Seagate 250GB SATA, 2 x WD 1TB SATA; External - Seagate 500GB USB, WD 640GB eSATA, 3 x WD 1TB eSATA

Become a BleepingComputer fan: Facebook

#8 sar pat

sar pat

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:01:20 PM

Posted 25 November 2009 - 01:59 PM

It worked! I'm having problems with this really big gif animation. Big gifs are very slow to load. I tried resizing all frames and it's really painful. Batch conversion are really helpful. Thanks!
I invite you to join our community dedicated in creating & sharing GIF Animated Pictures.

#9 Romeo29

Romeo29

    Learning To Bleep


  • BC Advisor
  • 3,165 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:127.0.0.1
  • Local time:04:20 PM

Posted 21 March 2010 - 06:54 PM

I have found a great GIF resizer : http://www.ashongsoft.com/gif-resizer.html
It does everything in only one step.

Edited by Romeo29, 21 March 2010 - 07:27 PM.
Corrected the link


#10 Tony O

Tony O

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:05:20 PM

Posted 06 June 2010 - 07:32 PM

Irfan View sure is an amazing little piece of software ... and it's not limited to just image viewing/editing. :huh:


However, for creating or editing animated .gif files I use Jasc's "Animation Shop"

#11 Broni

Broni

    The Coolest BC Computer


  • BC Advisor
  • 35,764 posts
  • ONLINE
  •  
  • Gender:Male
  • Location:Daly City, CA
  • Local time:02:20 PM

Posted 06 June 2010 - 09:15 PM

Another one - online: http://www.online-image-editor.com/

My Website

p4433470.gif

My help doesn't cost a penny, but if you'd like to consider a donation, click p22001735.gif




#12 Fawaz

Fawaz

  • Members
  • 2 posts
  • OFFLINE
  •  
  • Local time:02:20 AM

Posted 28 June 2010 - 04:18 PM

A site personally tested by me:

http://picasion.com/resize-image/




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users