There are many types of media available to you, to enrich your Flipbook experience. However, there are a few limitations you need to consider. It’s also important to keep in mind that even though a file might work, it can still create a less than optimal experience for customers visiting your Flipbook from a smartphone, or via a slow internet connection.

Want to skip right to what's most relevant for you?

You can use the table to of contents below, to navigate to the section of the guide most relevant to you!

  1. How big is too big? General size limitations.

  2. Best practices for image files

  3. Icons for shopping enrichments

  4. Optimizing images for iPaper

  5. Optimizing your Images for the Detailed Product View

  6. Best practices for video files

  7. GIF or Video? When to use what

  8. Optimization tools to get the job done

  9. Layers in Flipbooks

How big is too big?

We're pretty generous with the types, and sizes of file you can upload to iPaper, but there are a few rules of thumb to remember:

  • The maximum size of a PDF that can be uploaded to the Media Library is 1 GB (1024 MB).

  • The maximum size of a video (MP4) that can be uploaded to the Media Library is 250 MB.

  • The maximum size of any image that can be uploaded to the Media Library is 10 MB.

Best practices for image files

iPaper allows you to use a number of different images file types in your Flipbooks:

  • JPEG

  • PNG

  • GIF

  • SVG

.JPG/.JPEG: Files of this type should not exceed 500 KB, for best performance.

.GIF: Files of this type should not exceed 3 MB, for optimal performance.

.PNG: Files of this type should not exceed 1 MB, for optimal performance.

.SVG: Files of this type should not exceed 50 KB, for best performance.

Each file type comes with its own benefits and drawbacks, and you might be creating your Flipbook from pre-existing images in a predefined format. When it comes to the images within your Flipbook PDF, we optimize them automatically when you upload a new Flipbook to iPaper.

However, images manually uploaded to your Media library are not automatically optimized. These images could be anything from shopping icons to be used as Enrichments, or images to be used in, or trigger a Display banner.

Icons for shopping enrichments

Flipbook enrichments, such as shopping icons, can add an extra, immersive layer to your Flipbooks. We've got a few rules of thumb to help you provide the best possible experience to your end-users when using shopping enrichments:

  • Icons for enrichments should not exceed 500 pixels in height or width.

For best results, icons should be uploaded to your Media library as either .SVG, or .GIF file formats.

  • .SVG is the ideal format for icons. This file type is vector-based, which means it can scale indefinitely while preserving visual quality, sharpness and is typically of a low file size. It can even be animated, allowing you to add a bit of flair to your enrichments.

    Read our guide on how to best use .SVG files as calls-to-action in your Flipbooks:

  • .GIF formats are great if you'd like to add an animation to an enrichment, but don't necessarily need the benefits of an .SVG. A great example of this can be an animation that informs a customer that an item has been added to the cart, such as a Shop button.

    Read our guide on how to best use .GIF files as calls-to-action in your Flipbooks:

Optimizing your images for iPaper

Most image creation or processing software, such Adobe Photoshop, tends to have inbuilt functionality that helps you easily optimize your images for use on the web. Using Photoshop to optimize your images for use on the internet does require a basic understanding of how Photoshop works, but we've also found a fantastic guide that can take you through how to do it:

Optimizing your Images for the Detailed Product View

The Detailed Product View is an Enrichment automation that allows you to present your products nicely with images and text in a frame, as part of your Shop Configuration.

To ensure that the images in your Detailed Product View load quickly, and aren't blurry, we recommend that you save, and upload these images as a .PNG file.

While all other image file types that we support (see above) will also work, .PNG files combine the load speed of .JPEG files with the lossless qualities of .SVG files. Again, to make sure your images load optimally, your .PNG's shouldn't be larger than 1 MB in size.

Best practices for video files

When it comes to delivering a rich, interactive user experience in your Flipbooks, few things beat video. With that said, there are a few things to consider to make sure that they load and play well.

  • iPaper only supports the .MP4 video format.

    Why? The MP4 format offers good file compression, but doesn't compromise on image or sound quality, which makes this format ideal for Flipbooks. What's more is that the .MP4 format is fairly universal in that most, if not all, modern web browsers support it.

  • To ensure your video buffers quickly, aim to keep the file size under 15 MB. This allows it to buffer almost instantly on all but the slowest of connections.

  • Our general recommendation is to use Adobe Media Encoder, which lets you encode audio and video in a variety of distribution formats. If you are unsure on how to use Adobe Media Encoder, we encourage you to use a video creation professional. However, as a primer, we've got a great guide that can help you dial in the right settings when optimizing your videos:

  • Also consider who your Flipbook audience is, and how they browse your Flipbooks: having a video play automatically can lead to a more polished end-user experience, but it can lead to higher, and unwanted data usage for end-users visiting via smartphones in low-bandwidth areas.

  • Keep in mind whether you decide to use .MP4 videos hosted directly in iPaper, or embed videos hosted on streaming sites such as YouTube, or Vimeo.

    • Videos hosted on iPaper are loaded and played in the quality in which they are uploaded. We also do not optimize videos for different screen aspect ratios, or platforms.

    • Videos hosted on streaming sites can be automatically optimized for the browser, device, and bandwidth of the end-user, and can give a more streamline experience. However, these sites tend to overlay their own branding and players on your videos.

    Both options have their benefits and drawbacks, so it is down to you to decide which solution best delivers your desired results.

GIF or Video? When to use what.

You can use both GIFs and video files to create beautiful, immersive Flipbook experiences for your customers. However, while the visual end-user experience might be comparable, GIFs and videos are significantly different when it comes to how devices handle, and load these files.

GIFs

The GIF file format has been around almost as long as the Internet itself, and is created and uploaded much like other image file formats, but behaves like a video, in that it can support animation.

This has long made it a favorite format for those who want to incorporate the benefits of video but don't necessarily have the capacity to produce video files.

When to use GIFs

  • CTA’s

  • Small icons

  • Simple small images (line drawings, single color borders, simple animations)

  • Short animations

👍 Pros

👎 Cons

Supports transparency

Maximum 256 colors

Supported in all browsers

Generally large file sizes

No interface/controls

File needs to be fully loaded to device before it plays

Old and inefficient format

Pros of using GIF files

  • Unlike video files, GIFs, being image files, suppor transparency. This means that you can place GIFs over, a colored background in order to build a layered, immersive look.

  • Being a file format that has been around for some time, GIF files are supported in all browsers, meaning your end-users will be able to experience your GIFs, regardless of the device, or browser they are viewing it on.

  • GIFs, by nature, are looping, meaning that they start over, once they have completed their entire image sequence. This can be useful for creating points of interest in your Flipbook, where the additional movement within a GIF file can draw your end-users attention. As they loop automatically, no controls or interfaces are required to control the file, which can create a more immersive experience than video can offer.

Cons of using GIF files

  • Conversely, the lack of controls or interface, as mentioned above, can also become a drawback as it doesn't allow your end-users to pause, or stop GIF files they might consider annoying or detrimental to their browsing experience.

  • GIFs, not being a true video format, only supports 256 colors. This means that while they might work well for simpler images or animations, others that involve many shades, or gradients will be displayed in a compromized quality.

  • In addition to the limited color palette, GIFs generally tend to have a higher file size than modern video counterparts. File sizes can be cut down by optimizing your GIFS but this comes at the expense of frame rate and number of colors: the lower the number of each, the better your GIF will perform but the wrose it could potentially look.

  • As GIFs are techically image files, they have not buffering capability, and as such must load fully in the end-users browser before they can play. For high-speed connections, this is rarely a problem, but for visitors browsing in low-speed areas, this could lead to an incomplete, or negative end-user experience.

Video

Video comes in a variety of formats but iPaper only supports the MP4 format.

MP4 is one of the most widely accepted video formats for Internetn use, and supports streaming. This means that the MP4 video doesn't need to be locally stored (on the end-users device) before it can be played.

When to use Video

  • Full page background

  • Quality output with full color range is important

  • Complex animations or movement

👍 Pros

👎 Cons

Supported in all browsers

Does not support transparency (yet)

High quality

Lossy compression format (mp4). Each compression means loss of quality

Low file size

Videos have to be adapted to lower resolutions for mobile view

Full color range

Video is not automatically optimized before playing (if not played from a streaming platform)

File is streamed, instead of downloaded and played

Codec can play a role in different browsers.

You can see what codecs are required to support MP4 playback, here.

Pros of using MP4 video files

  • The MP4 format is supported by the vast majority of Internet browsers, and certainly all of the most commonly used browsers. This means that any and all of your users will see the content displayed, when it is presented as a video.

  • MP4s tend to balance a sweet spot between offering high quality whilst maintaining a relatively low file size. This means that you can deliver beautiful, quality content without weighing too much on customers using low-bandwidth connections. Lower file sizes also mean that videos will load, and buffer quickly.

  • Being a video, these files are usually streamable, meaning that visitors can begin to access, and even begin to watch them before they are fully buffered. This is especially important for users from low-bandwidth connections, and means that they do not need to download the file in order to play it.

Optimization tools to get the job done

💡 At iPaper, we just love tools that can help you optimize your images, videos, PDFs, and other media files. We recommend TinyWow, which is a collection of online tools that can help you do just that. Best of all, it's completely free!

If you have a lot of large, high-quality images that you'd like to streamline for online use, we recommend CompressJPEG. Again, it's completely free, so give it a whirl!

Additionally, if you're using .SVG files, and would like to add another layer of engagement to your Flipbooks, SVG Artista allows you to easily add animations to your .SVG files, giving your end-users a more compelling CTA. You guessed it, it's free and easy to use. 👍

Layers in Flipbooks

Your Flipbook is composed of a base PDF, along with multiple layers that can include different enrichments and media files.

Whenever you update a media element in your Flipbook, we recommend that you replace old, or unused layers with new media, rather than adding new files as a new layer, while keeping the old layer.

By removing old and unused layers, you help to keep the overall file size of your Flipbook to a minimum. This, in turn, ensures that your Flipbook loads quickly and minimizes bandwidth cost, which you impose on each of your visitors.


Finally, our Best Practices guide is just that: a guide. We always encourage you to try, and test what rich media works best to deliver your desired Flipbook experience.

You can also reach out to us via the Intercom button, below, with any questions you might have regarding how to best employ images and video in your Flipbooks, and we'll be happy to help you.


Did this answer your question?