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.
  
• The GIF in the brochure below is perhaps simpler, but an excellent example of how to grab your readers' attention. The call to action would be missed by most people if not highlighted like this. Adding a link on top of the GIF to their website tops it off!
  
• 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!
  
• GIFs are also great for showcasing your products. In this brochure, the creator added a 360 degrees rotating image of the jersey they are selling. As opposed to a static image, this way the readers can see the item from every possible angle in the space of just one single image.
  
  And while with a jersey you could maybe still expect what the product would look like, in other cases, it’s less obvious, and a GIF does wonders showcasing it.  
  
  As a final example, this watch has different operating modes which are shown very effectively.
  

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. Here’s how to do it:

1. Add your GIF as normal, with Autoplay and Loop Animation enabled.
2. Add a link to the same page, and resize it to become the same size as your GIF. You can check the width and height of your GIF and manually set the width and height of your link to these values for a perfect fit.
   
3. The link should already be in a higher layer, but if you added the link before you added your give, then use the 'bring to front' icon in the bottom toolbar.
4. Move your link to cover your GIF again, you can copy the X and Y positions from your GIF for a pixel-prefect result.

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.

​