They both need to be set to show on profile for those substitutions to output them, but they don't actually have to be visible. To do this move them to a tab that's in a not shown on profile position so they won't display on profile, but can be substituted in fine.

Well your condition is specifically configured to show the gravatar if the gravatar field has a value. It's not conditioning whether they uploaded something or not. So you'll need to empty the gravatar field before it'll show your uploaded image. The alternative is to add an extra condition to see if they uploaded something. Below will probably work.

[cb:if cb_gravatar="" or avatar!~"/(nophoto_n|tnnophoto_n)\.png$/"][value][/cb:if]
[cb:if cb_gravatar!="" and avatar=~"/(nophoto_n|tnnophoto_n)\.png$/"][cb:userfield field="cb_gravatar" /][/cb:if]

The first condition says if cb_gravatar is empty or if avatar is not the empty default then show avatar field. The second condition says if cb_gravatar is not empty and the avatar field is the empty default then show gravatar field.

This just switches the behavior you're seeing to the gravatar field instead of the avatar field though. Only way to clear the issue both ways is if you upload something then empty cb_gravatar and if you set cb_gravatar then delete the avatar (requires PHP).

The [value] should already be appropriately sized based off location. Fullsize on profile and thumbnail on userlist for example. The substitution usage you're using for the gravatar field is always going to be fullsize. To substitute in thumbnail you need to specify the reason as list on the substitution. Example as follows.

[cb:userfield field="cb_gravatar" reason="list" /]