Jump to content
Search Community

Banner ads: how to keep the file sizes down?

flash08 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Working on some small animated banners. Just wondering what the optimal GSAP setup might be in terms of balancing a decent animation feature set and the overall size of the files output. I've looked around a bit, but there doesn't seem to be much practical advice. Ideas?

Link to comment
Share on other sites

It's for a client. Their Web people I have communicated with don't seem all that savvy - it's for a marketing site, where almost all of the current content is just images created from their print materials - terrible for search engines. The large image file on the landing page (180K, mostly consisting of text and links rendered as a single .JPG) does not load all that quickly, but I don't want to make matters worse.

 

There are some toods out there for doing HTML5 banners, but they all seem pretty clunky unless you need to make many, many banners in lots of different sizes.

 

One of the primary ideas behind GSAP is lightweight functionality, I think. If I had a lot of these to do, I would just use something simple like Edge, as the ability to look at a timeline and swap in visual elements is handy - with GSAP for the actual animation, of course. But Edge adds another 100K or so in just overhead. Maybe OK, but seems a bit much for some small animated banners.

Link to comment
Share on other sites

Hmm, I'm a little confused about what exactly you are asking. From your initial post I would have answered just like Jonathan and recommended 

 

TweenLite + CSSPlugin for a lightweight animation pagckage weighing in at about 15kb. 

 

But now it seems that perhaps you are looking for an IDE, like Edge Animate.

I believe they recently lost their dependency on jQuery so the overall Edge file size footprint is probably a good deal smaller. Still not sure exactly how small. 

 

If you want a nice visual tool for basic layout of divs, images and text I found Google Web Designer to be fairly decent in that regard (although not very good at all for animating). You basically use GWD to generate the css that controls the initial positioning of all your elements. It does a fairly clean job and is a bit easier to get started with than coding everything by hand.

 

And if you are looking for an IDE that spits out GSAP-based animation. Take a peak at www.tweenui.com, it does a good job at handling the basics

  • Like 2
Link to comment
Share on other sites

I think TweenLite + CSSPlugin will be the way to go for me. I have yet to find out what the client's Javascript requirements are, if any.

 

I also noticed that Edge Animate has changed and is more efficient in its use of resources, but strangely enough, even though I have the CC2014  version, it seems not to be up to date per Adobe's own versioning data. Unfortunately, it seems that the latest Edge "update" is so buggy as to create many problems for developers.

 

A test of Edge shows that the problem is that files created in previous versions cannot be saved to the latest version under their original names. Using Save As generates a fairly compact new footprint - only one edge.5.0.0.min.js file, about 100K in size. With the other Edge Javascript needed to create the output files, the total footprint for a small banner is less than 120K, which seems OK, all other things considered.

Link to comment
Share on other sites

Yep, that's a very common recipe for banner ads - TweenLite + CSSPlugin, and maybe TimelineLite and EasePack depending on your needs. That gives you relatively tight file size plus extremely fast performance even on mobile devices. Some ad networks are even putting TweenLite and CSSPlugin on their CDNs and not counting their file size against your budget which is VERY helpful, although it sounds like maybe that won't matter in your particular case (I assume you're not going through a banner ad network). 

 

Adobe Edge Animate seems like a nice visual editor, but that convenience comes at the cost of file size and runtime performance. I know Adobe is working hard to improve on both fronts (like by removing the jQuery dependency), and they're well-aware of the recent version's stability problems - I bet they'll release a patch soon. Plenty of people use GSAP with Adobe Edge Animate, but it feels a little icky because of the redundancies; ideally you could use Edge Animate just for the layout and publish to a GSAP-driven runtime. Unfortunately that option doesn't exist yet. 

 

Like Carl said, Google Web Designer might be a viable option, and use it with GSAP. Obviously I'm biased, but I feel pretty strongly that GSAP is a better option for your animation because not only does it give you a lot more flexibility/options, but it isn't bound to a crippled technology like CSS Animations/transitions which cannot allow you to independently control transform components like scale, position, rotation, and skew (with different timings and/or eases). That's a BIG problem for most animators.

 

Let us know what you decide and how it goes. 

Link to comment
Share on other sites

My own preference is for GSAP, and were it not for my "free" Adobe Edge (I subscribe to the whole CC suite, as I very much need Photoshop, Illustrator and Indesign...) I wouldn't even bother with the Adobe program. Sometimes it's a bit difficult to "imagine" the GSAP Timeline, especially when the animations have to be completed quickly. Once I can successfully write a basic Timeline with TimeLineLite, I'll just use that for the basis of my new animations. I don't quite have the hang of it yet.

 

I have generated some test files with the latest version of Edge, and they seem stable enough. The animation possibilities are far fewer, but for some simple banner ads, I may go with Edge, especially since they changed the output file structure to bring the number of required files down to just 2.

 

The problems going forward are that the Webmasters for the client's site don't seem especially savvy, and just getting the pair of JS files into the page header, linking up the CSS file, and inserting the Edge Runtime code may not be something they can digest easily...sigh.

 

Thanks for your comments!

Link to comment
Share on other sites

Hello, Regarding what you said above .. "Sometimes it's a bit difficult to "imagine" the GSAP Timeline, especially when the animations have to be completed quickly."

 

I would recommend checking out the following GSAP video tuts by GreenSock, they will help tremendously in helping you get familiar with the GSAP timeline and sequencing tweens together:

And here are some Banner Builders that were made with GSAP:

GSAP Docs:

 

http://greensock.com/docs/#/HTML5/

 

:)

  • Like 1
Link to comment
Share on other sites

Thank you! I'm still tossing around the various options in my head. I don't much like the animation possibilities built into Edge - very limited, I think. It all boils dowjn to whether I can find the time to do some work with GSAP before this project gets approved and then, well, the race is on... I've now got my understanding of Edge at a point where I could do all of the banners pretty quickly - as long as the client doesn't dream up some complex animation thing.

Link to comment
Share on other sites

When it comes to reducing file size there are several options...

 

Optimize the Content

Choose content that lends itself to better compression, and smaller file sizes.

 

Use vector art or standard DOM elements where possible. (SVG and DIVs). This will reduce the amount of bitmap images the user needs to load.

 

Use filters instead of bitmaps when possible. (While this reduce file size by not including PNGs, this could effect performance when used on items that move.)

 

Use smaller bitmaps where possible. (Larger surface area usually translates to larger file size.) Sometimes you do not need full resolution images when things are blurry... just scale up a smaller image.

 

Sometimes multiple bitmaps can be smaller than one single bitmap. (Layering multiple bitmaps, divs and SVG can reduce file size than the comparable JPEG.)

 

Consider tiling repeating patterns instead of embedding the whole thing.

 

Optimizing Bitmaps

Retina JPGs - Doubling the dimensions of a JPG and shrinking it to 50% scale in HTML all while reducing its quality to around 30% will actually be smaller in file size that the normal size bitmap! Retina Revolution

 

PNGs from Photoshop, the "24 bit" kind are HUGE. "8 bit" images from photoshop can be compressed like GIFs but result in crappy alpha channels. But there are tons of ways to compress PNGs besides what Photoshop gives you. ImageAlpha is perfect for reducing the color palette while retaining that perfect alpha channel. PNGs are usually reduced to 10-15% of their original size!

 

ImageOptim is another great tool for any image, just drag and drop a folder of images or a select few of them and it will compress the JPGs GIFs or PNGs even further by taking off any extra metadata or useless information. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...