How to display an image field next to the title on the profile pages?
The use of the template is solid guess. However, you're using the wrong template. The template you suggesting isn't based on the page.tpl.php page. The output of the user-profile.tpl.php page, will end up in the $content section of your page template. 
You should try to use a different approach. 

How about a preprocess function? It will intercept the rendering of the variables and by so, you can alter them. If you want to change the title of your user-profile page, I'ld go with something like this:

/**
 * Implements hook_process_page().
 */
function mymodule_process_page(&amp;$vars, $hook) {
  // Load the global user object
  global $user;

  // Check if it's the userpage and the current user, depending on URL
  if ((arg(0) === 'user') &amp;&amp; (arg(1) === $user-&gt;uid)) {
      $vars['title'] .= ' ' . $user-&gt;avatar[LANGUAGE_NONE][0]['value'];
  }
}


Above preprocess function should be placed in your preprocess folder of your theme or the template.php.
It will extend the existing title with your extra fieldvalue.

There is only one drawback on this implementation. If you have a page with a path like /user/overview, the title will change too. Every URL with user as first argument and a UID as second, will be altered...

Goodluck!

EDIT:
Try this please and let me know how it went: 

/**
  * Implements hook_process_page().
  */
function mymodule_process_page(&amp;$vars, $hook) {
    // Load the global user object
    global $user;

    $image = array(
      '#theme'  =&gt; 'image',
      '#path'   =&gt; file_create_url($user-&gt;field_avatar[LANGUAGE_NONE][0]['uri']),
      '#width'  =&gt; 20,
      '#height' =&gt; 20,
    );

    if ((arg(0) === 'user') &amp;&amp; (arg(1) === $user-&gt;uid)) {
      $vars['title'] = render($image) . $vars['title'];
    }
}