Gifs in-depth

Our article How to add videos, links, and images to my flipbook? shows you the basics of adding images to your flipbooks. In this article, we will cover all the details so you get maximum use out of it. GIFs are something in between inline images and videos, and have some advantages and disadvantages over both.

• They allow you to add animations that don’t need a video player.
• They can be played automatically even on mobile devices.
• They can use a transparent background so you can place them over other content without completely obscuring it. 

The disadvantages are that the file size can easily become big. This means that it can take some time to load GIFs. Optimizing them as we explain below can help a lot. GIFs are also not that easy to create, but we have some tips for you in our article How to create your own GIFs?

In this article, we’ll cover:

• Some cool examples of how you can use GIFs in your flipbooks
• How to combine GIFs with links
• Understanding the GIF settings
• How you can optimize GIFs to improve load times

Use cases and examples

First, let’s look at some examples of what you can achieve with GIFs!

• This NHS brochure contains a lot of animated texts and infographics. That creates a dynamic reading experience, and the infographics attract additional attention to what many readers would otherwise easily ignore.
  
• GIFs in the report below are perhaps simpler, but it is an excellent example of how to grab your readers' attention. Simple and clean graphics that add dynamism to the publication:
  
• Next, we have a fashion brochure that contains GIFs with multiple pictures of the clothing advertised on the page. This way you can show several pictures, but they only take up the space of a single one in your brochure. What’s more, such GIFs are pretty simple to make!
  
• As a final example, see how animations make this magazine cover stand:
  

Combining GIFs with links

As we saw in one of the examples above, you can easily combine your GIFs with links to create a standout call to action. To achieve this:

1. Add the Animated GIF and Link elements.
2. The Link element must be at the front (check this article to learn how to arrange the order of the elements):
   
   1. Arrange the Animated GIF and click on "Send to back".
   2. Select the Link element, set it with "Bring forward" and arrange it on top of the GIF element.
    

GIF settings

Let's take a look at the settings you can configure for your GIFs

• Autoplay - when enabled, your GIF will play immediately when the page is opened and the GIF is loaded. Note that on mobile devices, Autoplay will only work for GIFs up to 10 MB in size. For larger GIFs, your readers will have to tap on the GIF to play it on mobile devices.
  This is by design: mobile users often have a slower connection. Large GIFs can be very slow to load and the reader may not even be aware that there is a GIF to wait for and flip to the next page. In addition, many people have limited data bundles. Even if they have a fast connection, their data bundle may be depleted quickly by a couple of 40 MB GIFs.
• Loop animation - when enabled, your GIF-animation will replay from the start when finished and keep continuously looping. If you disable this option, the GIF plays just once, though when the animation is completed, we show a small replay icon. A useful option if you feel that continuously moving GIFs create a distraction from your other content. 
• Icon settings - just like with other interactive objects, you can control how the size, position, and behavior of the GIF icon. Since many users prefer autoplaying, looping GIFs, the icon will not show up that often. Learn more about icon settings.

Optimizing GIFs for optimal user experience

One of the downsides of GIFs is that the files can quickly become large. Your cool animation is not nearly as impressive if the average reader has to wait 10 seconds for it to be downloaded. And as explained in the previous section, GIFs won’t autoplay on mobile devices if they are bigger than 10 MB. 

Here are some tips on how you can optimize your GIFs so your reader will enjoy your GIFs:

1. Don’t make your GIFs bigger than necessary. If you can resize your GIFs in the editor to make them significantly smaller, it’s probably better to ask your designer to make them smaller in the first place, or to resize them with this online tool, EZGIF: For example, suppose that you want to add a small ‘On sale’ GIF next to some products and this is the GIF that you have.
   
   Resizing it to 25% reduces the file size by a massive 87%! 
   
2. Apart from resizing, EZGIF also has several tools to optimize your GIF. It depends on your GIF which tool has the best results. The standard optimization is Lossy Compression. This slightly reduces the quality, but the difference is very hard to see, and the file size can be reduced by up to 50%
   
   When your GIF has a large static area (without movement), then Optimize transparency can massively reduce its size.  This cute little GIF weighs a massive 3.6MB, taking several seconds to load.
   
   But only the boat and the stars are moving. The rest of the image is relatively static. When we use the Optimize transparency fix, the file size is reduced to just 675 KB, less than 20% of the original! Again, you have to look really hard to spot any difference in quality. Here's the optimized version: 
   

Feel free to experiment with the other optimization options in EZGIF. They are more specific: sometimes only giving small gains (or even increases), but sometimes very good results as well. And even a small gain may be enough to reduce them from just over 10MB to under 10MB.

​