How to create fallback images

Last Updated: Feb 09, 2017 02:10PM CET

In this article

    What is a fallback image?

    BannerFlow's fallback images are images, a JPG, GIF or PNG that will be displayed if the device, software or browser that the banner is displayed on doesn't support HTML5, it does in other words fall back on an image instead but they can also be used as a banner of their own.

     

    Image types

    GIF

    Fallback image with 2 frames (23.5 KB)​

     

    Pros:

    • Multiple parts of the banner's duration can be included through frames
    • Makes it easier to get your message out
    • Does support transparency
    • Does not have to be a static image


    Cons:

    • Can only contain up to 256 colors which may impact the overall color quality
    • Is in most cases larger in file size compared to JPG and PNG


    Should be used when:

    • You want to have multiple parts of your banner included in a frame-by-frame animation
     

    JPG

    Fallback image (16.3 KB)

     


    Pros:
    • Is 24-bit colors which is great for high-detail images/banners
    • The most widely used image type
    • Supports lossy compression

    Cons:
    • Does not support transparency
    • Can in some cases cause a large file-size

    Should be used when:
    • The fallback image can be a static image
    • You need a fallback image that is low in file size
     

    PNG

    Fallback image (7.64 KB)

    Pros:

    • Supports both 24-bit as well as 8-bit colors which is in most cases suitable for high-detail images/banners
    • Is in most cases smaller than GIF in terms of file size
    • Does support transparency but in a wider range compared to GIF
    • Are preferred when low amount of colors are used
    • The compression is lossless and can be quantized

    Cons:
    • Not recommended for images/banners that has a lot of detail as it can generate high file-sizes
    • Can in many cases cause larger file sizes compared to JPG

    Should be used when:
    • You need to use transparent backgrounds
    • You need a really high quality image and there is no file size requirements

     

    When/why you could use fallback images:

    • Gives you the possibility to easily display banners in emails and in PDFs etc. without the need of creating the banner all over again in an image editing software
    • The banners will be displayed in all web browsers, even if the specific web browser doesn't support HTML5. The fallback image will automatically be shown instead
    • Banners are loaded faster on the page by displaying the fallback image whilst the HTML5 banner is being loaded, this reduces the load time and displays your banner faster. This is also known as polite loading

     

    How to work with fallback images in BannerFlow

     

    All fallback images are by default a one frame GIF image and generated from 2 seconds in on the banner's entire duration, although this is fully editable to be set to your own preferences in order to make the banners as optimal as possible for your market and profile. Fallback image settings are changeable through the tab "Fallback images" in the top menu and can be read more about here.

     

    Fallback images are built up by image frames, called fallback frame in BannerFlow. If you have more than one fallback frame specified and the Image type is set to be GIF, then a GIF animation will be made based on these frames. If on the other hand either JPG or PNG is selected, only one frame can be in use. Please note that switching from GIF to JPG or PNG will reset all fallback frame placements and place a single one at the start of the banner's timeline.

    If additional frames are wanted in the GIFs then they can be added to the timeline by clicking on the Add fallback frame button found next to the Preview button just above the timeline (see image below). The fallback frame will be set to where the timeline playhead is placed, although, they can be realigned freely at any time by simply clicking and dragging them to either left or right.

     

     

    It's also important to keep in mind that the Fallback frames DOES NOT take transition animations nor pulsate effects into account so the GIFs will NOT have the animations you see when previewing the HTML5 banner.

    By clicking on a specific frame a small popover will appear which lets you change the frame's duration. This indicates for how long the specific frame will be displayed in the GIF, this is by default set to 2 seconds. You can also remove the frame in this popover. 

     

     

    When the banner is saved, the banner fallback image will be generated and updated accordingly outside of the banner builder within a few seconds.

    Previous Article Next Article

    RELATED ARTICLES

    support@bannerflow.com
    https://cdn.desk.com/
    false
    desk
    Loading
    seconds ago
    a minute ago
    minutes ago
    an hour ago
    hours ago
    a day ago
    days ago
    about
    false
    Invalid characters found
    /customer/en/portal/articles/autocomplete