2

I am trying to create a 8 second long GIF showing 3 different pages of an app I have built. I am using Relector 2 to record, and then using Quicktime to record just the screen (Reflector records with the device bordering around it). From there, I have used several mp4 to GIF tools, but the file is still around 4 mb. I suppose it is worth mentioning, my image dimensions are around 300 px wide and 700 px tall.

Any tips on the best way to create or save GIFs like these for website usage?

Thank you!

1
  • What FPS are you looking to get? Do you need to edit the footage after recording it? In what ways? May 29, 2017 at 13:49

3 Answers 3

1

If you don’t need to use gestures, you can use the iOS simulator to present the app, and something like Screenflick to record it. Screenflick can also remove the mouse cursor from the recording, or optionally show where clicks and taps were (other screen recording apps can also be used, including QuickTime). This means you don’t need a physical iOS device or Reflector to record the app. You will need the source code, so you can run the app in the iOS Simulator though.

If you’re showing off anything remotely complex, it might be worth considering using a video file on the website, rather than a GIF. Video files typically end up smaller and better quality for longer and larger content.

If you really want a GIF, I find Photoshop to be the best way to optimise, usually using these techniques and steps.

  1. FileImportVideo Frames to Layers.
  2. If the recorded video file is 60fps or 30fps, you can tell Photoshop to only use every nth frame when importing. You can also trim the top and tail of the video when importing.
  3. Deleting frames that are identical, and setting a frame delay instead can help reduce the number of frames in the GIF.
  4. When saving, use FileExportSave For Web (Legacy) and experiment with the number of colours used. If the app has large areas of the same colour, you might be able to get away with 128, 64 or even 32 colours.
0

If your .gif is too large then you will need to either lower the FPS or the resolution. Since 700x300 is pretty small you should check that the FPS is pretty low (dependent on your animation 15-20 fps should be fine).

You could use a .mp4 with H.264 encoding instead of .gif to get better quality and maybe even a smaller file size.

3
  • Thanks for the reply, I did play around with the FPS in the mp4 to GIF converting stage, even ratcheting it down to 8 FPS, but still could not get it below 4 MB.
    – KCW
    Nov 21, 2016 at 23:32
  • If that is the case and using .mp4 doesn't help you'll need to consider having a 4MB file.
    – SitiSchu
    Nov 21, 2016 at 23:37
  • @KCW, you could maybe save stills and animate using css3 or javascript.
    – Joonas
    Nov 22, 2016 at 6:52
0

You can try to compress the GIF using ImageMagick, gifsicle or http://ezgif.com/optimize

If it's a GIF showing an app, there probably are large areas of the gif which are not changing in every frame, so first thing you could try is "Optimize transparency" option with 3% or 5% fuzz factor. It works wonders for some images, but the results very much depend on the particular image. After that you can try Lossy compression on the resulting image.

If you can provide a link to the video, I can try to figure out the best method.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.