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 optimise and compress the image assets you use. While Bannerflow do optimise and compress uploaded image assets itself as good as it can, optimising on your own may help greatly.
What Bannerflow is doing to optimise your images
When you start using your uploaded PNG and JPG images in the banner, Bannerflow is automatically doing a few things to your images in order to optimise them.
- Bannerflow is always creating a smaller version of your original image to make sure it's as small as possible for the selected banner size.
- If the image is used in the banner without any animations, Bannerflow will also crop the image to only use the parts of the image that is actually visible in the banner.
- In the top menu under "Settings" you can find "Optimise image", this setting can be turned on or off. When image optimisation is on, it means that Bannerflow will optimise and compress your images even more. But please note that you might have to upload your images again after you have changed this setting in order for it apply to that specific image asset.
Analyse file size
Our banner weight service shows you the weight of all assets in your banners as well as the necessary html files needed. It will run your ad in a simulated environment and document the total size of all assets loaded within 1 second.
All optimised banners should have no issue having all assets measured within 1 second, however, a non-optimised banner may show a varied weight when refreshing your browser. In this case, review all the material again and optimise further.
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.
NOTE: The editor preview weight is an approximation, as the banner is not "complete" at this time. Please save and exit the editor to see a final banner weight calculation in the Banner set open view.
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 green wrench. From this edit asset view you can also replace the image after you optimised it yourself.
Optimising and compressing
You can easily optimise your image assets with several free online services but optimising 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 favourite online services:
- http://optimizilla.com/ - For JPG and PNG, allows you to set the percentage of compression
- https://kraken.io/ - Easy compress any image format(GIF, JPG, PNG)
- https://tinypng.com/ - Drag and drop to compress PNG and JPG brilliantly well
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.
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.
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.
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.
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 optimisation 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 "optimise 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.