A set of function to improve the markup of images inserted into the editor in Wordpress.

better_wp_images.php

<?php

function show_img_vars($html, $id, $caption, $title, $align, $url, $size, $alt) {
	// remove alignment class from the image
	$html = preg_replace( '/ class=".*"/', '', $html );

  // return the normal html output you would expect
  $figure = "<figure class='image-inline";
  if ($align == 'left' | 'right') {
  	$figure .= " align".$align;
  } elseif ($align == 'center') {
  	$figure .= " aligncenter";
  }
  $figure .= "'>\n";
  $figure .= "  $html\n";
  if ($caption) {
  	$figure .= "  <figcaption class='caption'>$caption</figcaption>\n";
  }
  $figure .= "</figure>\n";

  return $figure;
}
add_filter( 'image_send_to_editor', 'show_img_vars', 10, 9 );

function filter_captions_to_editor($shcode, $html) {
	// the caption code strips the alignment class out of the html so...
	// we have to recover it from the shortcode like so
	$align = preg_replace('/(\[.*)align="(\w*)"(.*\])((<.*>)\s*)+(.*)(\[.*\])/', '\2', $shcode );
	// and insert it back into the html like so (P.S. I'm a total regex noob)
	$html = preg_replace('/<figure class=\'.*\'/', '<figure class=\'image-inline '.$align.'\'', $html);

	return $html;
}
add_filter( 'image_add_caption_shortcode', 'filter_captions_to_editor', 10, 9);

?>