In Flexitive, GIFs can be used to add a continuous animation sequence to your design. There are however limitations to using GIFs and settings that you will need to keep in mind when hosting GIFs online.


Flexitive uses smart compression to automatically resize, JPEGs and PNGs but Flexitive does NOT automatically resize GIF images on export,  because of all the different variables that are taken into account when optimising a GIF (explained below).


Below is a list of a few of the things to consider when using a GIF in Flexitive.


Frame Delay/Frames Per Second of a GIF


When creating a GIF to be used in your Flexitive design, it's important to make sure that you have prepared your GIF in such a way that it is optimized for the browsers that it will be viewed on.


Every GIF has 2 basic properties that are important to consider when optimizing them. They are:

  • Frame Delay: The amount of time between frames. This is measured in hundredths of seconds (e.g. 1/100's of a second)
  • Frames Per Second: The number of frames that will be displayed in 1 second of the GIF playing


Browsers place a lower limit on the Frame Delay of any GIF, and an upper limit on the FPS. They also have a Default Frame Delay if the frame delay of the GIF is lower than that browser. This Default Frame Delay is not equal to the lower limit, so it is important to make sure the the Frame Delay of your GIF is not lower than the limit for the browsers it will be viewed in.


Because different browsers are made separately and under different specifications, you will need to consider the limitations of each browser when preparing your GIF. Below is a chart that displays the browsers and their associated properties.


Browser
Minimum Frame Delay
Maximum FPS
Default Frame Delay
Chrome
2/100's (0.02 s)
50 FPS
10/100's (0.10 s)
Firefox
2/100's (0.02 s)
50 FPS
10/100's (0.10 s)
Internet Explorer
6/100's (0.06 s)
16 FPS
10/100's (0.10 s)
Safari
6/100's (0.06 s)
16 FPS
10/100's (0.10 s)


If a GIFs Frame Delay is below the minimum frame delay for a browser, it will be displayed using the Default Frame Delay. This can significantly affect the quality of how the GIF being displayed. Because of this, it is important to make sure that any GIFs you use in Flexitive have a Frame Delay of 0.06 seconds or more in order for them to be displayed correctly when they are used in Internet Explorer or Safari.


GIFs and File Size


Most Ad Servers have a file size limit for uploads, typically sitting between 150KB and 200KB. GIF files tend to be very large file sizes, usually more than this limit, and it is important to consider this before using a GIF in your design.


In cases where file size is a concern, we recommend that you use a static image wherever possible. For more information, check out our article on Uploading Images and Reducing File Size.



How Does a GIF Load When it is Served?


Whenever a design is served, every asset in the design is loaded before anything is displayed on the screen. This is done to make sure that the design does not display without showing every component of the banner correctly.


This is particularly important when serving a design with a GIF file. When a GIF file is served in a design, the GIF will be fully loaded when the banner begins to play and will begin its animation sequence. This occurs even if the GIF has not yet animated onto the banner.


It is important to keep this in mind when you are building a design where the GIF animation needs to line up with the animation sequence in Flexitive.


Reducing File Size for GIFs


When you export design from Flexitive, Flexitive uses smart compression to automatically resize JPEGs and PNGs, but Flexitive does not resize GIFs. For more information, check out our article on Image Compression and Reducing File Size.


As GIFs are not compressed when they are included in a design exported from Flexitive, it is important to compress the GIF as much as possible before you upload the GIF to your Flexitive design. 


When using a GIF in a Flexitive project, the resolution of the GIF will not be reduced when the design is exported. In order to reduce the file size of your GIF, it is recommended to reduce the resolution of the GIF so it fits the resolution of your design.

For example, if you'll be using a GIF as a background to a 300x250 design, and the resolution of the GIF is 900x750, it is recommended to resize the GIF to a resolution of 300x250 to reduce the file size of the design.