How to keep HTML5 banners under the 100kb limit – Tips and tricks

In the ever-expanding world of online banner advertising, the fight for lower file-size continues to be a headache faced by many designers and developers. Enforced by the ad networks in order to reduce page load times keeping your file size low has become vital. In many cases the banners you create will exceed the 60-100kb limit that is so frequently seen, making it vital you compress all image assets you use to the smallest possible file size.

Common JPG Optimisation tips and misconceptions

The use of JPEGs for background images and other elements when creating HTML5 banners is very common due to the good quality to file size ratio. Especially in comparison to PNG files which are commonly very high in file size.

The first decision that needs to be made when you come to compressing your JPEG files is the choice of program you use to optimise your images. Although JPEG standards are very strict they only determine how an image is transformed when at a reduced size. It is the developer that determines how an image is optimised. A lot of marketers portray that their optimisation software offers low file size with high-quality settings and that programs like Adobe Photoshop make the file size twice as heavy. A good example is Tiny JPEG optimisation software, but the same level of quality to file size can be achieved in programs such as Adobe Photoshop. These optimisation tools are normally used as a quick method of compression not due to them optimising images any better than your normal image optimisation programs. Each program has its own optimisation scale with a variety of different optimisation algorithms. The only comparison you should be making when optimising your images is the quality to size ratio. For example, an image saved at 50 quality in Photoshop will look the same as an image saved at 80 quality using a different software.

You should never save an image at 100 quality as this is not the highest quality possible. It is the mathematical optimisation limit, saving an image at 95 quality is more than enough to prevent any loss. One thing to bear in mind in Photoshop is when setting the quality to 50 another optimisation algorithm is run called colour down-sampling, which averages out the neighbouring eight-pixel blocks. Therefore, if the image has low, high-contrast details it is best to set the quality to at least 51.

Another method of reducing JPEG file size is the use of Gaussian blur. Gaussian blur softens the details of an image and is generally used to add interesting visual effects to an image or to enhance an image’s quality. What a lot of people are unaware of is that if you introduce a small amount of Gaussian blur to a photo (that doesn’t affect the quality of the image) you can reduce the file size.

Common PNG Optimisation tips and misconceptions

PNG files are lossless compressed bitmapped images. Although they are compressed they tend to retain a large files size. Created as an improved, non-patented .gif replacement that is now the most widely used lossless image compression format. Especially when creating HTML5 banners due to its support for transparency.

PNG-8

There are three different colour palettes .png files can use; 8 bit, 24 bit and 32 bit; 8 bit giving you the lowest quality and files size. PNG-8 can handle up to 256 colours, similar to a GIF, and is brilliant for small graphics, line-art, logos, but is not suitable for complex graphics or photos with gradients or a wide variety of colours. Banding will occur in these cases and a different format colour palette will be better suited. When using PNG-8 index transparency, edges may become jagged, you can avoid this by using matte colour as the jagged edges will blend in with your true background and appear smooth. This format is often used when creating HTML5 banners due to the low file size and support for transparency. If images are complex PNG-24 or PNG-32 formats may need to be used.

PNG-24

PNG-24 is similar to PNG-8 but supports 16 million colours and will preserve colour variations such as gradients much better preventing banding. It uses the same lossless compression as the PNG-8, but you will retain a much larger file size. This is due to the amount of information that is retained in comparison to the PNG-8. Therefore, this is not a great choice of format to use when creating HTML5 banners that need a low file size. Also, PNG-24 does not support alpha transparency which poses a lot of issues when compressing multi-coloured backgrounds and gradients.

PNG-32

PNG-32 is the highest quality most of the time, but this also means the highest in file size, meaning you should only use this format when necessary. For example, for complex graphics that have gradients. It uses alpha transparency which provides multiple levels of transparency which in turn, provides a much smoother blend along curves or anti-aliased edges. Allowing you to have varying transparency for your graphic/image, like a graphic overlay that has a 50% transparency over the whole image. I most cases any PNG-32 images should be compressed or converted to PNG-24/PNG-8 in order to keep banner files size low. However, if there are no file size restrictions PNG-32 is the best format to use, giving you the highest quality end product.

Posterisation

Posterisation is also a good method of reducing image file size without harming the quality of the image too much. It works by converting continuous colour gradients into non-continuous segments that require fewer colours to render. This can be created or happen accidentally, unwanted posterisation, also known as banding can occur when the colour depth is insufficient to accurately sample a continuous gradation of colour tone. This results in a continuous colour gradient appearing in bands of colour. When done intentionally posterisation converts gradients into distinct, but flat, areas of different tones of colour. Gradual transitions in colour are replaced with sharp abrupt changes.

Avoiding Large font files and code libraries

Large font files will bring the file size of your banner ad right up and may even be over 100k themselves. A solution to this problem is to convert all text to .png files which can then, in turn, be compressed. The text is a perfect example of an image that can use a PNG-8 format in order to get the smallest file. The quality will not be affected as the text is a simple line of block colour which will not be affected by banding.

Minimising the size of .js files is important when trying to create an HMTL5 banner with low file size. The use of external code libraries such as https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js allows you to use complex animations without increasing the file size of your banner massively. Often Lite versions of the code libraries are offered which you may be able to download if you don’t wish to link externally. However, this will increase your file size considerably.

If you think your HTML5 banner campaigns could be improved by our team, please get in touch or come and meet us in person at our Bedfordshire based studio.