Tips for Keeping Your HTML5 Banner Within the 100kb Limit

Flash banners used to be the preferred option of website owners, thanks to their interactive designs and animations. However, in recent times, Flash has fallen out of favour, with HTML5 banners now taking their place as the advertising format of choice.

Image Credit
The main reason for the change is loading speeds. Flash banners take a while to load, whereas HTML5 banners take a fraction of the time, and in today’s world of instant gratification, that’s particularly important. According to the BBC, shoppers are prepared to wait no more than three minutes for a webpage to load before heading off elsewhere – usually to a competitor’s site.
Reducing JPEG File Sizes
JPEGs offer high-quality images that can be compressed for faster loading times, but it’s important to establish the optimum size that retains enough clarity to make the image worthwhile. When using Photoshop to compress your images, it’s worth setting the quality to a minimum of 51, as this avoids degrading the image with colour down-sampling.
You could also use a small amount of Gaussian blur, which won’t alter the image but will reduce the size of the file. If in doubt, it’s worth consulting experts, such as, who specialise in offering web development services in London. Skilled developers can easily adjust your images to optimum levels, saving you time and trouble.

Image Credit

PNG Files

PHG image files offer three different formats: 8 bit, 24 bit and 32 bit. Where there are no restrictions on file sizes, 32 bit offers the greatest clarity and image quality. However, for HTML5 banners, 8 bit is the preferred option, as it keeps file sizes small.
Colour gradients are converted into segments with fewer colours in a process which is also known as banding. Rather than a gentle flow of colours, one into the next, the colours are presented as bands of colour.
Avoid Files with Large Fonts
Where images contain large font files, the 100K banner limit will quickly be passed. One option is to convert your text files into .png files and then compress them. The simple blocks of colour used in text files won’t be harmed or compromised by the compression into a PNG 8 bit file format, but the banner will then be within the correct limits for optimum display.

Related Posts