Reducing ad weight with TinyPNG’s online compression tool

In my last article, I wrote about how you can save a lot of “weight” (in kilobytes) by using “hosted libraries”. Indeed, there are other ways to save a few kilobytes, and I always say: it might save lives! I keep hearing from my clients something like “can we do that with only 150 KBs?” – because that’s the magic limit for standard banners on most ad servers, like Doubleclick, Sizmek or Adform. Everything that exceeds this weight costs more, but is usually not planned in the budget of the media agencies. The magic word is “compression”!
Usually, it might be no problem not to compress images you are using on your ads, but as soon as you start having a bigger amount of assets (example, car diving into the ad on my last article or if you need your buffer for other stuff, like to embed your own fonts), then it might be a hard bite to keep the banner within the weight boundaries!
With Photoshop there is the possibility to save PNGs and JPGs with the setting “Save for Web”, one can adjust the compression level of JPGs. This is not the case with PNGs though and the PNGs saved from Photoshop will be “losless”, which means the image isn’t compressed and has a high file weight.
The sweet panda from TinyPNG gives you the chance to drag’n’drop the uncompressed JPGs and PNGs to upload them – which are then optimized on their server and can be downloaded directly as a single file or ZIP package or even stored directly to your Dropbox. Note the limit of 20 images per batch. Of course, you can start several batches after the other if you have a higher amount images (just as if you have to compress a whole bunch of ads).

Results of the compresson:

results of the optimisation

Overview of the saved kilobytes + dropbox/download buttons – ©TinyPNG

Also helpful in case you have a whole bunch of images to kompress is the Photoshop plug-in:, which is available for 50 Dollars. In my opinion a very good investment for people like me, who constantly have to compress tons of images to reduce the weight of the banner.

PNG comparison:

uncompressed image compressed image

Left uncompressed image with 82 KBs, right compressed image with 33 KBs. In my opinion, there is hardly a difference to be seen – ©Pixabay

With the plugin you can use the excellent compression directly from Photoshop when saving the assets – but even better is the possibility to use the “batch compression”, if you have to optimize several files. To do this, select a local folder on the computer and apply the optimization in all PNGs and JPGs in it, also in all subfolders! So you can produce the entire project including format adaptations “as usual” and let the compression run over the entire folder when you are ready. I still recommend to have a backup copy of the uncompressed images, just in case!
So as you can see, you can meet the agency’s demand for a small amount of data by reducing the size of the images with a tool like TinyPNG.
I hope to have helped with these words, if you have any questions and suggestions on this topic, please write them down in the comments! : -)

Using “hosted libraries” in ads running over adservers

Today I will be writing about the use of “hosted libraries”, ie the externally hosted resources (like the TweenMax used on my last article ) in banners. Usually we are quite limited in the production of standard ad in terms of the “weight” of the banner (ie the amount of data, typically measured in kilobytes). Every ad is shown many thousands of times, and of course all the data has to be transferred every time so that the amount of data we may use is limited by publishers and it is no wonder we are really happy about every bit of KB we can save on the production when it comes to their restrictions!
So it helps if we don’t have to deliver scripts like TweenMax “physically” within the ads or upload them to the adserver/marketer. Fortunately, we can take advantage of the scripts from various content delivery networks (CDNs), which we load in the head tag of our ads (they are for free, of course):

HTML inside Head:

<script src=""> 

Usually you will find CDN links to mostly every scripts, such as Jquery, CreateJS, AdobeEdge etc.

It is important to always use a Secure connection, so the script should be loaded from a https:// source , otherwise the publishers may knock on your door with complaints. 🙂
I hope to have helped with this article and feel free to comment or write down any questions!