How to convert .mp4 to .gif with optimal speed and size?
September 27, 2017 7:34 AM Subscribe
I'm creating a Kickstarter campaign and want to use animated GIFs to demonstrate some product features. I have some short MP4 files—what is the best way to convert them to GIFs that are not distorted or extremely large?
Best answer: I have used instagiffer to create GIFs for Tumblr.
posted by lmfsilva at 8:11 AM on September 27, 2017 [1 favorite]
posted by lmfsilva at 8:11 AM on September 27, 2017 [1 favorite]
If you have access, photoshop works here...lots of tutorial online...
posted by NoDef at 8:35 AM on September 27, 2017
posted by NoDef at 8:35 AM on September 27, 2017
Best answer: The real trick with GIFs is keeping the number of frames and the resolution down. Limit yourself to less than 2 seconds. Capture just the thing that you need to explain with the GIF. Keep your framerate down; 12 frames a second is a good starting point. Don't move the camera during the gif; let the action happen with your object. Avoid gradients and texture; solid colors are the way to go.
I like to use ffmpeg & Photoshop to create GIFs.
Get ffmpeg installed (beyond the scope of this answer, memail me if you have questions). Make a directory called 'Frames', and run a ffmpeg command like:
Open Photoshop, and click Files>Scripts>Load Files into Stack. Add all the images from the folder 'GIF 1'. Click OK. This will take a minute to do its thing.
Now click Window>Timeline. A new area will open at the bottom of the screen. If it says 'create video timeline' click the dropdown and change to 'create frame animation'. Click the 'create frame animation button'. Now in the top right-hand corner of the timeline window click the three bars button (aka hamburger button), and click 'make frames from layers'.
At the bottom left of the timeline now click the text that says 'once' and change it to 'forever'. Now click the play button and watch your GIF! If your GIF runs backwards click the hamburger button again and click 'reverse frames'.
You'll probably want to tweak the GIF timing; select all your GIF frames and beneath them change 0 sec. to 0.2. Play with that number to find something that works well for your GIF.
Click Image>Image Size. Resize the long side of your gif to ~500pixels. If 500pixels makes what you're trying to show too small, first crop into your GIF to highlight what you're trying to show and then resize to 500pixels.
Click File>Export>Save for Web (legacy). At the top right make sure 'GIF' is selected (not JPG/PNG). Set your colors to 128, and then select 'Diffusion' from the second box under 'GIF'. Uncheck the 'Transparency' box. In the bottom lefthand corner below the GIF you can see the size of your gif change as you tweak settings. Under Lossy try 20. Lossy will save a lot a lot of space but can make images look worse; find a happy medium. Remember to click play and see how the GIF looks as you tweak these settings. Try playing around with all the settings here. Save the GIF when you're satisfied.
Finally run the GIF through some optimizer tool. ImageOptim works well for me typically, but try a few to see what gets you the best results. You might try gifsicle too.
posted by gregr at 9:28 AM on September 27, 2017 [10 favorites]
I like to use ffmpeg & Photoshop to create GIFs.
Get ffmpeg installed (beyond the scope of this answer, memail me if you have questions). Make a directory called 'Frames', and run a ffmpeg command like:
ffmpeg -i input-video.mp4 -q:v 1 frames/%09d.jpgThis will create a folder with all the frames from your video. Delete everything before and after the action you want. In the action area select every other frame (hopefully 24 frames or fewer), and copy and paste those into a folder called 'GIF 1'.
Open Photoshop, and click Files>Scripts>Load Files into Stack. Add all the images from the folder 'GIF 1'. Click OK. This will take a minute to do its thing.
Now click Window>Timeline. A new area will open at the bottom of the screen. If it says 'create video timeline' click the dropdown and change to 'create frame animation'. Click the 'create frame animation button'. Now in the top right-hand corner of the timeline window click the three bars button (aka hamburger button), and click 'make frames from layers'.
At the bottom left of the timeline now click the text that says 'once' and change it to 'forever'. Now click the play button and watch your GIF! If your GIF runs backwards click the hamburger button again and click 'reverse frames'.
You'll probably want to tweak the GIF timing; select all your GIF frames and beneath them change 0 sec. to 0.2. Play with that number to find something that works well for your GIF.
Click Image>Image Size. Resize the long side of your gif to ~500pixels. If 500pixels makes what you're trying to show too small, first crop into your GIF to highlight what you're trying to show and then resize to 500pixels.
Click File>Export>Save for Web (legacy). At the top right make sure 'GIF' is selected (not JPG/PNG). Set your colors to 128, and then select 'Diffusion' from the second box under 'GIF'. Uncheck the 'Transparency' box. In the bottom lefthand corner below the GIF you can see the size of your gif change as you tweak settings. Under Lossy try 20. Lossy will save a lot a lot of space but can make images look worse; find a happy medium. Remember to click play and see how the GIF looks as you tweak these settings. Try playing around with all the settings here. Save the GIF when you're satisfied.
Finally run the GIF through some optimizer tool. ImageOptim works well for me typically, but try a few to see what gets you the best results. You might try gifsicle too.
posted by gregr at 9:28 AM on September 27, 2017 [10 favorites]
For further help with ffmpeg: https://amiaopensource.github.io/ffmprovisr/
posted by brainwane at 2:25 PM on September 27, 2017
posted by brainwane at 2:25 PM on September 27, 2017
« Older Ctrl+H brings up 'find' instead of 'replace' in... | Who doesn't love a schvitz? DC and Philadelphia... Newer »
This thread is closed to new comments.
posted by adventureloop at 7:53 AM on September 27, 2017