4

Creating GIFs designed for the Google AdWords platform can be tricky, given the file-size constraint of 150Kb.

I looked for examples online and found this page: http://bannerspiration.com/gif

Not all of these meet the second constraint for AdWords (fps should be lower than 5), but the file size is good for all of them.

My outputs are full of artefacts and I have no idea what to do to increase the overall quality of the picture without using a higher file size.

Any tutorial, advice, suggestion, would be highly appreciated.

Below you can see one of my examples that worked well and one that has compression artifacts.

Many thanks!

GIF for AdWords, no artefacts

GIF for AdWords, compression artifacts

1

You can try this tool: https://ezgif.com/optimize It gives you multiple different GIF optimization methods.

For banners with large areas that are not changing from frame to frame, I think you will get the best results by first selecting "Optimize Transparency" (it will make most of the frames transparent, with only the changed pixels saved, thus reducing the amount of data needed for the GIF), and then you can run "Lossy GIF" optimization on the previous result. Play around with the fuzz and compression level values to get the best quality/file size ratio for your needs.

1

The best option is to optimize your GIFs on export within Photoshop.

I see no reason at all that your second example ought to have these artifacts...

I took the time to roughly recreate your second GIF:

Test GIF

The file size of your example is 49K. This means you should have still had room to increase the quality and be under your 150K limit.

Anyhow the one I made is the same dimensions, and has the same frame rate... yet it's only 46K (with no artifacts).

So I'm not even sure how this might have happened. How did you make your GIF anyhow?

My example was made in Photoshop at the highest possible GIF quality settings so... ?

  • I created 20 different animations in After Effects, in order to have control over the different layouts independently and to animate in a way that was familiar to me, having never animated in Photoshop. I exported mov at first, which returned files with the artifacts above, once compressed in gif. I ended up rendering the assets I had already created in jpg sequences, to avoid losing the work done so far. I loaded two or three frames per gif in Photoshop and exported them as recommended in this guide: blog.hubspot.com/marketing/…. – ale7780s Jun 12 '17 at 0:15
0

If you have Photoshop, then you can make a high definition GIF without it being huge.

Also, for the mobile ad, I would recommend making one where the different "slides" glide across.

  • Thanks for sharing your advice. What do you mean by "glide" across? If my understanding of what you say is correct, I have tried and decided to avoid making layers slide as the low fps really make the animation poor. – ale7780s Jun 12 '17 at 0:12
  • Ok. I see, I see how that'd lower the fps. – Elijah Ciali Jun 12 '17 at 16:56
0

After many more experiments with PPC ads and GIFs, I can now recommend a different way to look at the problem.

  1. GIFs are not necessarily the best way to generate banners for PPC, and definitely not the best if one wants to cover the whole range of formats allowed by AdWords.

Instead, I would recommend using one of the many tools designed to create HTML responsive banners. The main reason why these banners are so convenient is that their size depends on the combined file-size of all elements included in the banner, and not on the number of frames, as elements are animated via the tool which generates code rather than frames.

  1. In order to generate artefact-free GIFs, the two main factors in play are duration and number of colours. This article targets UX/UI designers but rules apply to generating GIFs for any other purpose: 7 TIPS FOR DESIGNING AWESOME ANIMATED GIFS

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.