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.
What Bannerflow is doing to optimize 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 optimize 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 "Optimize image", this setting can be turned on or off. When image optimization is on, it means that Bannerflow will optimize 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.
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 green 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:
- 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 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.