Optimizing banner file size

Last Updated: Jul 10, 2017 09:52AM CEST

In this article

    In the world of online advertising, the file-size of your banners are usually enforced to be kept low by the ad networks mostly in order to reduce long page loads. In the midst of this, a war of load time comes to hand where you fight to have the lowest possible file-size on your banner in order to show your advertisement quicker. 

    In many cases, there's a great possibility that the banners you create do breach the quite so often seen 60-100kB limit so it's important to try optimize and compress the image assets you use. While BannerFlow do optimizing and compressing of uploaded image assets itself as good as it can, optimizing it on your own may help greatly.

    Analyze file size

    To see what the size of the banner is, press the preview button in the editor and the file size will appear in the right corner of the banner. 


    To see the file size of each asset simply press on the pie chart.


    To see how much each image asset weigh after it has been uploaded to BannerFlow either right-click on the image in the Media Library or hover your mouse and click on the wrench. From this edit asset view you can also replace the image after you optimized it yourself.

    Optimizing and compressing

    You can easily optimize your image assets with several free online services but optimizing them in image raster graphics editors such as Adobe Photoshop or GIMP is also an option. Down below are some links to a few of our favorite online services:

     

     

    Fix the image type

    One very important thing to bear in mind is to use the correct image type for the correct type of image. This means that it might not always be efficient to use have the image saved as a PNG when it's an image with a lot of details or a GIF for a photograph - both cases can add up quite a lot to the overall weight of the image file.
     

    Best practices

     

    GIF
    Can only contain up to 256 colors which may impact the overall color quality and is in most cases larger in file size compared to JPG and PNG so in generally not recommended to use.

    JPG
    Is in generally the go-to image type for all images as it maintain the image quality well and can be easily compressed. Does however not support transparency.

    PNG
    Can be used as a substitute for JPG if you want to maintain the quality as much as you can. This can cause heavier image files. PNG cannot be as easily compressed as JPG but do support transparency. Generally speaking, PNG is only recommended if the image contains transparency.

    SVG
    Least but not least SVG. If you do have logotypes or imagery with not a lot of colors(e.g icons), SVG is really welcomed as it maintain the source quality and can be scaled however you want without losing quality. This does require you to have the source vector graphic however. Feel free to check out our logotype to SVG guide.
     

    Banner size is still too high!

    In case the banner's size is still too high after optimization and compression of your image assets then it's great to keep in mind that all banners are/can be served politely(polite loading - Called "optimize loading time" in the banner settings). This means that the so called fallback image will be displayed while the HTML5 banner is being loaded (this is active by default), when the HTML5 banner has been loaded then it will be displayed instead of the fallback image. This usually helps with file size limitations that ad networks has as it's the polite loading that will be as measurement for the on-load for the banner. So if you keep the fallback image below 50kB then there shouldn't be any definite issues.

    Read more about Fallback images.

    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