diff --git a/core/modules/image/image.admin.inc b/core/modules/image/image.admin.inc
index df68065..c4dd667 100644
--- a/core/modules/image/image.admin.inc
+++ b/core/modules/image/image.admin.inc
@@ -5,6 +5,8 @@
  * Administration pages for image settings.
  */
 
+use Drupal\Core\Template\Attribute;
+
 /**
  * Menu callback; Listing of all current image styles.
  */
@@ -671,15 +673,15 @@ function theme_image_style_effects($variables) {
 }
 
 /**
- * Returns HTML for a preview of an image style.
+ * Prepare variables for image style preview templates.
  *
- * @param $variables
- *   An associative array containing:
- *   - style: The image style array being previewed.
+ * Default template: image-style-preview.html.twig.
  *
- * @ingroup themeable
+ * @param array $variables
+ *   An associative array containing:
+ *   - style: The image style being previewed.
  */
-function theme_image_style_preview($variables) {
+function template_preprocess_image_style_preview(&$variables) {
   $style = $variables['style'];
 
   $sample_image = config('image.settings')->get('preview_image');
@@ -717,46 +719,47 @@ function theme_image_style_preview($variables) {
   $preview_attributes = array_intersect_key($preview_image, array('width' => '', 'height' => ''));
   $preview_attributes['style'] = 'width: ' . $preview_width . 'px; height: ' . $preview_height . 'px;';
 
-  // In the previews, timestamps are added to prevent caching of images.
-  $output = '<div class="image-style-preview preview clearfix">';
-
-  // Build the preview of the original image.
-  $original_url = file_create_url($original_path);
-  $output .= '<div class="preview-image-wrapper">';
-  $output .= t('original') . ' (' . l(t('view actual size'), $original_url) . ')';
-  $output .= '<div class="preview-image original-image" style="' . $original_attributes['style'] . '">';
-  $output .= '<a href="' . $original_url . '">' . theme('image', array('uri' => $original_path, 'alt' => t('Sample original image'), 'title' => '', 'attributes' => $original_attributes)) . '</a>';
-  $output .= '<div class="height" style="height: ' . $original_height . 'px"><span>' . $original_image['height'] . 'px</span></div>';
-  $output .= '<div class="width" style="width: ' . $original_width . 'px"><span>' . $original_image['width'] . 'px</span></div>';
-  $output .= '</div>'; // End preview-image.
-  $output .= '</div>'; // End preview-image-wrapper.
-
-  // Build the preview of the image style.
-  $preview_url = file_create_url($preview_file) . '?cache_bypass=' . REQUEST_TIME;
-  $output .= '<div class="preview-image-wrapper">';
-  $output .= check_plain($style->label()) . ' (' . l(t('view actual size'), file_create_url($preview_file) . '?' . time()) . ')';
-  $output .= '<div class="preview-image modified-image" style="' . $preview_attributes['style'] . '">';
-  $output .= '<a href="' . file_create_url($preview_file) . '?' . time() . '">' . theme('image', array('uri' => $preview_url, 'alt' => t('Sample modified image'), 'title' => '', 'attributes' => $preview_attributes)) . '</a>';
-  $output .= '<div class="height" style="height: ' . $preview_height . 'px"><span>' . $preview_image['height'] . 'px</span></div>';
-  $output .= '<div class="width" style="width: ' . $preview_width . 'px"><span>' . $preview_image['width'] . 'px</span></div>';
-  $output .= '</div>'; // End preview-image.
-  $output .= '</div>'; // End preview-image-wrapper.
-
-  $output .= '</div>'; // End image-style-preview.
+  $variables['style_name'] = check_plain($style->label());
 
-  return $output;
+  // Original image variables.
+  $variables['original_url'] = file_create_url($original_path);
+  $variables['original_attributes'] = new Attribute($original_attributes);
+  $original_attributes['src'] = file_create_url($original_path);
+  $original_attributes['alt'] = t('Sample original image');
+  $variables['original_image'] = array(
+    '#theme' => 'image',
+    '#attributes' => new Attribute($original_attributes),
+  );
+  $variables['original_image_height'] = $original_image['height'];
+  $variables['original_image_width'] = $original_image['width'];
+  $variables['original_height'] = $original_height;
+  $variables['original_width'] = $original_width;
+
+  // Preview image variables.
+  $variables['preview_url'] = file_create_url($preview_file) . '?' . time();
+  $variables['preview_attributes'] = new Attribute($preview_attributes);
+  $preview_attributes['src'] = file_create_url($preview_file) . '?cache_bypass=' . REQUEST_TIME;
+  $preview_attributes['alt'] = t('Sample modified image');
+  $variables['preview_image'] = array(
+    '#theme' => 'image',
+    '#attributes' => new Attribute($preview_attributes),
+  );
+  $variables['preview_image_height'] = $preview_image['height'];
+  $variables['preview_image_width'] = $preview_image['width'];
+  $variables['preview_height'] = $preview_height;
+  $variables['preview_width'] = $preview_width;
 }
 
 /**
- * Returns HTML for a 3x3 grid of checkboxes for image anchors.
+ * Prepares variables for image anchor templates.
  *
- * @param $variables
- *   An associative array containing:
- *   - element: A render element containing radio buttons.
+ * Default template: image-anchor.html.twig.
  *
- * @ingroup themeable
+ * @param array $variables
+ *   An associative array containing:
+ *   - element: An associative array containing the image.
  */
-function theme_image_anchor($variables) {
+function template_preprocess_image_anchor(&$variables) {
   $element = $variables['element'];
 
   $rows = array();
@@ -764,73 +767,94 @@ function theme_image_anchor($variables) {
   foreach (element_children($element) as $n => $key) {
     $element[$key]['#attributes']['title'] = $element[$key]['#title'];
     unset($element[$key]['#title']);
-    $row[] = drupal_render($element[$key]);
+    $row[] = array(
+      'data' => $element[$key],
+    );
     if ($n % 3 == 3 - 1) {
       $rows[] = $row;
       $row = array();
     }
   }
-
-  return theme('table', array('header' => array(), 'rows' => $rows, 'attributes' => array('class' => array('image-anchor'))));
+  $variables['table'] = array(
+    '#theme' => 'table',
+    '#header' => array(),
+    '#rows' => $rows,
+    '#attributes' => array(
+      'class' => array('image-anchor'),
+    ),
+  );
 }
 
 /**
- * Returns HTML for a summary of an image resize effect.
+ * Prepares variables for image resize summary templates.
  *
- * @param $variables
+ * Default template: image-resize-summary.html.twig.
+ *
+ * @param array $variables
  *   An associative array containing:
  *   - data: The current configuration for this resize effect.
- *
- * @ingroup themeable
  */
-function theme_image_resize_summary($variables) {
+function template_preprocess_image_resize_summary(&$variables) {
+  $output = '';
   $data = $variables['data'];
 
   if ($data['width'] && $data['height']) {
-    return check_plain($data['width']) . 'x' . check_plain($data['height']);
+    $output = check_plain($data['width']) . 'x' . check_plain($data['height']);
   }
   else {
-    return ($data['width']) ? t('width @width', array('@width' => $data['width'])) : t('height @height', array('@height' => $data['height']));
+    $output = ($data['width']) ? t('width @width', array('@width' => $data['width'])) : t('height @height', array('@height' => $data['height']));
   }
+
+  if(isset($data['upscale'])) {
+    $output .= ' (' . t('upscaling allowed') . ')';
+  }
+
+  $variables['summary'] = $output;
 }
 
 /**
- * Returns HTML for a summary of an image scale effect.
+ * Prepares variables for image scale summary templates.
  *
- * @param $variables
+ * Default template: image-scale-summary.html.twig
+ *
+ * @param array $variables
  *   An associative array containing:
  *   - data: The current configuration for this scale effect.
- *
- * @ingroup themeable
  */
-function theme_image_scale_summary($variables) {
+function template_preprocess_image_scale_summary(&$variables) {
   $data = $variables['data'];
-  return theme('image_resize_summary', array('data' => $data)) . ' ' . ($data['upscale'] ? '(' . t('upscaling allowed') . ')' : '');
+  $variables['summary'] = array(
+    '#theme' => 'image_resize_summary',
+    '#data' => $data,
+  );
 }
 
 /**
- * Returns HTML for a summary of an image crop effect.
+ * Prepares variables for image crop summary templates.
  *
- * @param $variables
+ * Default template: image-crop-summary.html.twig
+ *
+ * @param array $variables
  *   An associative array containing:
  *   - data: The current configuration for this crop effect.
- *
- * @ingroup themeable
  */
-function theme_image_crop_summary($variables) {
-  return theme('image_resize_summary', $variables);
+function template_preprocess_image_crop_summary(&$variables) {
+  $variables['summary'] = array(
+    '#theme' => 'image_resize_summary',
+    '#data' => $variables['data'],
+  );
 }
 
 /**
- * Returns HTML for a summary of an image rotate effect.
+ * Prepares varaibles for image rotate summary templates.
  *
- * @param $variables
+ * Default template: image-rotate-summary-html-twig.
+ *
+ * @param array $variables
  *   An associative array containing:
  *   - data: The current configuration for this rotate effect.
- *
- * @ingroup themeable
  */
-function theme_image_rotate_summary($variables) {
+function template_preprocess_image_rotate_summary(&$variables) {
   $data = $variables['data'];
-  return ($data['random']) ? t('random between -@degrees&deg and @degrees&deg', array('@degrees' => str_replace('-', '', $data['degrees']))) : t('@degrees&deg', array('@degrees' => $data['degrees']));
+  $variables['summary'] = ($data['random']) ? t('random between -@degrees&deg and @degrees&deg', array('@degrees' => str_replace('-', '', $data['degrees']))) : t('@degrees&deg', array('@degrees' => $data['degrees']));
 }
diff --git a/core/modules/image/image.field.inc b/core/modules/image/image.field.inc
index 495ca04..cb6a4ef 100644
--- a/core/modules/image/image.field.inc
+++ b/core/modules/image/image.field.inc
@@ -7,6 +7,7 @@
 
 use Drupal\Component\Utility\NestedArray;
 use Drupal\Core\Entity\EntityInterface;
+use Drupal\Core\Template\Attribute;
 
 /**
  * Implements hook_field_info().
@@ -417,72 +418,82 @@ function _image_field_required_fields_validate($element, &$form_state) {
 }
 
 /**
- * Returns HTML for an image field widget.
+ * Prepare variables for image widget templates.
+ *
+ * Default template: image-widget.html.twig.
  *
  * @param array $variables
  *   An associative array containing:
- *   - element: A render element representing the image field widget.
- *
- * @ingroup themeable
+ *   - element: An associative array containing the image field widget.
  */
-function theme_image_widget($variables) {
+function template_preprocess_image_widget(&$variables) {
   $element = $variables['element'];
-  $output = '';
-  $output .= '<div class="image-widget form-managed-file clearfix">';
+  $element['#attributes']['class'] = array('image-widget', 'form-managed-file', 'clearfix');
 
   if (isset($element['preview'])) {
-    $output .= '<div class="image-preview">';
-    $output .= drupal_render($element['preview']);
-    $output .= '</div>';
+    $variables['preview'] = drupal_render($element['preview']);
   }
 
-  $output .= '<div class="image-widget-data">';
   if ($element['fid']['#value'] != 0) {
-    $element['filename']['#markup'] .= ' <span class="file-size">(' . format_size($element['#file']->filesize) . ')</span> ';
+    $element['filename']['#markup'] .= '<span class="file-size">(' . format_size($element['#file']->filesize) . ')</span>';
   }
-  $output .= drupal_render_children($element);
-  $output .= '</div>';
-  $output .= '</div>';
 
-  return $output;
+  $variables['data'] = drupal_render_children($element);
+  $variables['attributes'] = new Attribute($element['#attributes']);
 }
 
 /**
- * Returns HTML for an image field formatter.
+ * Prepares variables for image formatter templates.
+ *
+ * Default template: image-formatter.html.twig.
  *
  * @param array $variables
  *   An associative array containing:
- *   - item: An array of image data.
- *   - image_style: An optional image style.
- *   - path: An optional array containing the link 'path' and link 'options'.
- *
- * @ingroup themeable
+ *   - item: the formatter item
  */
-function theme_image_formatter($variables) {
+function template_preprocess_image_formatter(&$variables) {
+  file_put_contents('formatter.txt',print_r($variables['item'],true), FILE_APPEND);
   $item = $variables['item'];
 
+  // Build a render array for the image from the formatter item.
+  $image = array();
+  if(isset($item['uri'])) {
+    $image['#uri'] = $item['uri'];
+  }
+  if(isset($item['width'])) {
+    $image['#width'] = $item['width'];
+  }
+  if(isset($item['height'])) {
+    $image['#height'] = $item['height'];
+  }
+  if(isset($item['alt'])) {
+    $image['#alt'] = $item['alt'];
+  }
   // Do not output an empty 'title' attribute.
-  if (isset($item['title']) && drupal_strlen($item['title']) == 0) {
-    unset($item['title']);
+  if(isset($item['title']) && drupal_strlen($item['title']) != 0) {
+    $image['#title'] = $item['title'];
+  }
+  if(isset($item['attributes'])) {
+    $image['#attributes'] = $item['attributes'];
   }
 
-  if ($variables['image_style']) {
-    $item['style_name'] = $variables['image_style'];
-    $output = theme('image_style', $item);
+  // If this image needs an image style we need to handle it here.
+  if (!empty($variables['image_style'])) {
+    $image += array(
+      '#style_name' => $variables['image_style'],
+      '#theme' => 'image_style',
+    );
   }
   else {
-    $output = theme('image', $item);
+    $image += array('#theme' => 'image');
   }
+  $variables['image'] = $image;
 
   // The link path and link options are both optional, but for the options to be
   // processed, the link path must at least be an empty string.
   if (isset($variables['path']['path'])) {
-    $path = $variables['path']['path'];
-    $options = isset($variables['path']['options']) ? $variables['path']['options'] : array();
-    // When displaying an image inside a link, the html option must be TRUE.
-    $options['html'] = TRUE;
-    $output = l($output, $path, $options);
+    $variables['path']['options'] = isset($variables['path']['options']) ? $variables['path']['options']: array();
+    $variables['path']['options']['html'] = TRUE;
+    $variables['url'] = url($variables['path']['path'], $variables['path']['options']);
   }
-
-  return $output;
 }
diff --git a/core/modules/image/image.module b/core/modules/image/image.module
index 017ce42..1cd375c 100644
--- a/core/modules/image/image.module
+++ b/core/modules/image/image.module
@@ -11,6 +11,7 @@
 use Drupal\Component\Uuid\Uuid;
 use Drupal\file\Plugin\Core\Entity\File;
 use Drupal\image\Plugin\Core\Entity\ImageStyle;
+use Drupal\Core\Template\Attribute;
 
 /**
  * Image style constant for user presets in the database.
@@ -211,6 +212,7 @@ function image_theme() {
         'title' => NULL,
         'attributes' => array(),
       ),
+      'template' => 'image-style',
     ),
 
     // Theme functions in image.admin.inc.
@@ -222,21 +224,33 @@ function image_theme() {
     ),
     'image_style_preview' => array(
       'variables' => array('style' => NULL),
+      'file' => 'image.admin.inc',
+      'template' => 'image-style-preview',
     ),
     'image_anchor' => array(
       'render element' => 'element',
+      'file' => 'image.admin.inc',
+      'template' => 'image-anchor',
     ),
     'image_resize_summary' => array(
       'variables' => array('data' => NULL),
+      'file' => 'image.admin.inc',
+      'template' => 'image-resize-summary',
     ),
     'image_scale_summary' => array(
       'variables' => array('data' => NULL),
+      'file' => 'image.admin.inc',
+      'template' => 'image-scale-summary',
     ),
     'image_crop_summary' => array(
       'variables' => array('data' => NULL),
+      'file' => 'image.admin.inc',
+      'template' => 'image-crop-summary',
     ),
     'image_rotate_summary' => array(
       'variables' => array('data' => NULL),
+      'file' => 'image.admin.inc',
+      'template' => 'image-rotate-summary',
     ),
 
     // Theme functions in image.field.inc.
@@ -245,6 +259,7 @@ function image_theme() {
     ),
     'image_formatter' => array(
       'variables' => array('item' => NULL, 'path' => NULL, 'image_style' => NULL),
+      'template' => 'image-formatter',
     ),
   );
 }
@@ -967,26 +982,21 @@ function image_effect_apply($image, $effect) {
 }
 
 /**
- * Returns HTML for an image using a specific image style.
+ * Prepare variables for image style templates.
  *
- * @param $variables
- *   An associative array containing:
- *   - style_name: The name of the style to be used to alter the original image.
- *   - uri: The path of the image file relative to the Drupal files directory.
- *     This function does not work with images outside the files directory nor
- *     with remotely hosted images. This should be in a format such as
- *     'images/image.jpg', or using a stream wrapper such as
- *     'public://images/image.jpg'.
- *   - width: The width of the source image (if known).
- *   - height: The height of the source image (if known).
- *   - alt: The alternative text for text-based browsers.
- *   - title: The title text is displayed when the image is hovered in some
- *     popular browsers.
- *   - attributes: Associative array of attributes to be placed in the img tag.
+ * Default template: image-style.html.twig.
  *
- * @ingroup themeable
+ * @param array $variables
+ *   An associative array containing:
+ *   - width: the width of the image
+ *   - height: the height of the image
+ *   - style_name: the name of the image style to be applied
+ *   - attributes: additional attributes to apply to the image
+ *   - uri: URI of the source image before styling
+ *   - alt: alternative text to be displayed instead of the image
+ *   - title: title of the image
  */
-function theme_image_style($variables) {
+function template_preprocess_image_style(&$variables) {
   // Determine the dimensions of the styled image.
   $dimensions = array(
     'width' => $variables['width'],
@@ -1001,9 +1011,24 @@ function theme_image_style($variables) {
   // Add in the image style name as an HTML class.
   $variables['attributes']['class'][] = 'image-style-' . drupal_html_class($variables['style_name']);
 
+  // Remove 'image-style' from the class array. This is added through
+  // template_preprocess() but we do not need it.
+  // @todo Remove after http://drupal.org/node/1938430 is resolved.
+  $variables['attributes']['class'] = array_diff($variables['attributes']['class'], array('image-style'));
+
   // Determine the URL for the styled image.
   $variables['uri'] = image_style_url($variables['style_name'], $variables['uri']);
-  return theme('image', $variables);
+
+  // @todo fix this
+  foreach (array('width', 'height', 'alt', 'title') as $key) {
+    if (isset($variables[$key])) {
+      $variables['attributes'][$key] = $variables[$key];
+    }
+  }
+
+  $variables['attributes']['src'] = file_create_url($variables['uri']);
+
+  $variables['attributes'] = new Attribute($variables['attributes']);
 }
 
 /**
diff --git a/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php b/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php
index e7552d2..8ec039a 100644
--- a/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php
+++ b/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php
@@ -69,8 +69,8 @@ function testImageDimensions() {
     );
 
     image_effect_save($style, $effect);
-    $img_tag = theme_image_style($variables);
-    $this->assertEqual($img_tag, '<img class="image-style-test" src="' . $url . '" width="120" height="60" alt="" />');
+    $img_tag = theme('image_style', $variables);
+    $this->assertEqual($img_tag, '<img src="' . $url . '" class="image-style-test" width="120" height="60" alt="" />');
     $this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
     $this->drupalGet($url);
     $this->assertResponse(200, 'Image was generated at the URL.');
@@ -90,8 +90,8 @@ function testImageDimensions() {
     );
 
     image_effect_save($style, $effect);
-    $img_tag = theme_image_style($variables);
-    $this->assertEqual($img_tag, '<img class="image-style-test" src="' . $url . '" width="60" height="120" alt="" />');
+    $img_tag = theme('image_style', $variables);
+    $this->assertEqual($img_tag, '<img src="' . $url . '" class="image-style-test" width="60" height="120" alt="" />');
     $this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
     $this->drupalGet($url);
     $this->assertResponse(200, 'Image was generated at the URL.');
@@ -112,8 +112,8 @@ function testImageDimensions() {
     );
 
     image_effect_save($style, $effect);
-    $img_tag = theme_image_style($variables);
-    $this->assertEqual($img_tag, '<img class="image-style-test" src="' . $url . '" width="45" height="90" alt="" />');
+    $img_tag = theme('image_style', $variables);
+    $this->assertEqual($img_tag, '<img src="' . $url . '" class="image-style-test" width="45" height="90" alt="" />');
     $this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
     $this->drupalGet($url);
     $this->assertResponse(200, 'Image was generated at the URL.');
@@ -134,8 +134,8 @@ function testImageDimensions() {
     );
 
     image_effect_save($style, $effect);
-    $img_tag = theme_image_style($variables);
-    $this->assertEqual($img_tag, '<img class="image-style-test" src="' . $url . '" width="45" height="90" alt="" />');
+    $img_tag = theme('image_style', $variables);
+    $this->assertEqual($img_tag, '<img src="' . $url . '" class="image-style-test" width="45" height="90" alt="" />');
     $this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
     $this->drupalGet($url);
     $this->assertResponse(200, 'Image was generated at the URL.');
@@ -152,8 +152,8 @@ function testImageDimensions() {
     );
 
     image_effect_save($style, $effect);
-    $img_tag = theme_image_style($variables);
-    $this->assertEqual($img_tag, '<img class="image-style-test" src="' . $url . '" width="45" height="90" alt="" />');
+    $img_tag = theme('image_style', $variables);
+    $this->assertEqual($img_tag, '<img src="' . $url . '" class="image-style-test" width="45" height="90" alt="" />');
     $this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
     $this->drupalGet($url);
     $this->assertResponse(200, 'Image was generated at the URL.');
@@ -173,8 +173,8 @@ function testImageDimensions() {
     );
 
     image_effect_save($style, $effect);
-    $img_tag = theme_image_style($variables);
-    $this->assertEqual($img_tag, '<img class="image-style-test" src="' . $url . '" alt="" />');
+    $img_tag = theme('image_style', $variables);
+    $this->assertEqual($img_tag, '<img src="' . $url . '" class="image-style-test" alt="" />');
     $this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
     $this->drupalGet($url);
     $this->assertResponse(200, 'Image was generated at the URL.');
@@ -193,8 +193,8 @@ function testImageDimensions() {
     );
 
     image_effect_save($style, $effect);
-    $img_tag = theme_image_style($variables);
-    $this->assertEqual($img_tag, '<img class="image-style-test" src="' . $url . '" width="30" height="30" alt="" />');
+    $img_tag = theme('image_style', $variables);
+    $this->assertEqual($img_tag, '<img src="' . $url . '" class="image-style-test" width="30" height="30" alt="" />');
     $this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
     $this->drupalGet($url);
     $this->assertResponse(200, 'Image was generated at the URL.');
@@ -214,8 +214,8 @@ function testImageDimensions() {
     );
 
     image_effect_save($style, $effect);
-    $img_tag = theme_image_style($variables);
-    $this->assertEqual($img_tag, '<img class="image-style-test" src="' . $url . '" alt="" />');
+    $img_tag = theme('image_style', $variables);
+    $this->assertEqual($img_tag, '<img src="' . $url . '" class="image-style-test" alt="" />');
     $this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
     $this->drupalGet($url);
     $this->assertResponse(200, 'Image was generated at the URL.');
@@ -232,7 +232,7 @@ function testImageDimensions() {
     );
 
     image_effect_save($style, $effect);
-    $img_tag = theme_image_style($variables);
-    $this->assertEqual($img_tag, '<img class="image-style-test" src="' . $url . '" alt="" />');
+    $img_tag = theme('image_style', $variables);
+    $this->assertEqual($img_tag, '<img src="' . $url . '" class="image-style-test" alt="" />');
   }
 }
diff --git a/core/modules/image/lib/Drupal/image/Tests/ImageThemeFunctionTest.php b/core/modules/image/lib/Drupal/image/Tests/ImageThemeFunctionTest.php
index cd00cb1..0d73884 100644
--- a/core/modules/image/lib/Drupal/image/Tests/ImageThemeFunctionTest.php
+++ b/core/modules/image/lib/Drupal/image/Tests/ImageThemeFunctionTest.php
@@ -57,7 +57,7 @@ function testImageFormatterTheme() {
       ),
     );
     $rendered_element = render($element);
-    $expected_result = '<a href="' . base_path() . $path . '"><img class="image-style-test" src="' . $url . '" alt="" /></a>';
+    $expected_result = '<a href="' . base_path() . $path . '"><img src="' . $url . '" class="image-style-test" alt="" /></a>';
     $this->assertEqual($expected_result, $rendered_element, 'theme_image_formatter() correctly renders without title, alt, or path options.');
 
     // Link the image to a fragment on the page, and not a full URL.
@@ -68,7 +68,7 @@ function testImageFormatterTheme() {
       'fragment' => $fragment,
     );
     $rendered_element = render($element);
-    $expected_result = '<a href="#' . $fragment . '"><img class="image-style-test" src="' . $url . '" alt="" /></a>';
+    $expected_result = '<a href="#' . $fragment . '"><img src="' . $url . '" class="image-style-test" alt="" /></a>';
     $this->assertEqual($expected_result, $rendered_element, 'theme_image_formatter() correctly renders a link fragment.');
   }
 
@@ -93,7 +93,7 @@ function testImageStyleTheme() {
       '#uri' => $original_uri,
     );
     $rendered_element = render($element);
-    $expected_result = '<img class="image-style-image-test" src="' . $url . '" alt="" />';
+    $expected_result = '<img src="' . $url . '" class="image-style-image-test" alt="" />';
     $this->assertEqual($expected_result, $rendered_element, 'theme_image_style() renders an image correctly.');
   }
 
diff --git a/core/modules/image/templates/image-anchor.html.twig b/core/modules/image/templates/image-anchor.html.twig
new file mode 100644
index 0000000..f97aabf
--- /dev/null
+++ b/core/modules/image/templates/image-anchor.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a 3x3 grid of checkboxes for image anchors.
+ *
+ * Available variables:
+ * - table: HTML for the table of image anchors.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_anchor()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ table }}
diff --git a/core/modules/image/templates/image-crop-summary.html.twig b/core/modules/image/templates/image-crop-summary.html.twig
new file mode 100644
index 0000000..16fea65
--- /dev/null
+++ b/core/modules/image/templates/image-crop-summary.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a summary of an image crop effect.
+ *
+ * Available variables:
+ * - summary: The current configuration for this crop effect.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_crop_summary()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ summary }}
diff --git a/core/modules/image/templates/image-formatter.html.twig b/core/modules/image/templates/image-formatter.html.twig
new file mode 100644
index 0000000..7a5b278
--- /dev/null
+++ b/core/modules/image/templates/image-formatter.html.twig
@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a formatted image field.
+ *
+ * Available variables:
+ * - image: A collection of image data.
+ * - image_style: An optional image style.
+ * - path: An optional array containing the link 'path' and link 'options'.
+ * - url: An optional url the image can be linked to.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_formatter()
+ *
+ * @ingroup themeable
+ */
+#}
+{% spaceless %}
+  {% if url %}
+    <a href="{{ url }}">{{ image }}</a>
+  {% else %}
+    {{ image }}
+  {% endif %}
+{% endspaceless %}
diff --git a/core/modules/image/templates/image-resize-summary.html.twig b/core/modules/image/templates/image-resize-summary.html.twig
new file mode 100644
index 0000000..27db6d8
--- /dev/null
+++ b/core/modules/image/templates/image-resize-summary.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a summary of an image resize effect.
+ *
+ * Available variables:
+ * - summary: The current configuration for this resize effect.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_resize_summary()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ summary }}
diff --git a/core/modules/image/templates/image-rotate-summary.html.twig b/core/modules/image/templates/image-rotate-summary.html.twig
new file mode 100644
index 0000000..e385923
--- /dev/null
+++ b/core/modules/image/templates/image-rotate-summary.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a summary of an image rotate effect.
+ *
+ * Available variables:
+ * - summary: The current configuration for this rotate effect.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_rotate_summary()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ summary }}
diff --git a/core/modules/image/templates/image-scale-summary.html.twig b/core/modules/image/templates/image-scale-summary.html.twig
new file mode 100644
index 0000000..4370529
--- /dev/null
+++ b/core/modules/image/templates/image-scale-summary.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a summary of an image scale effect.
+ *
+ * Available variables:
+ * - summary: The current configuration for this scale effect.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_scale_summary()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ summary }}
diff --git a/core/modules/image/templates/image-style-preview.html.twig b/core/modules/image/templates/image-style-preview.html.twig
new file mode 100644
index 0000000..e9a40e2
--- /dev/null
+++ b/core/modules/image/templates/image-style-preview.html.twig
@@ -0,0 +1,54 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a preview of an image style.
+ *
+ * Available variables:
+ * - style_name: The name of the image style.
+ * - original_image_height: The height in pixels of the original image.
+ * - original_image_width: The width in pixels of the original image.
+ * - original_height: The lesser of original_image_height or sample image
+ *     height.
+ * - original_width: The lesser of original_image_width or sample image width.
+ * - original_url: The URL of the original image.
+ * - original_attributes: HTML attributes for the original style.
+ * - original_image: The rendered original image.
+ * - preview_image_height: The height in pixels of the preview image.
+ * - preview_image_width: The width in pixels of the preview image.
+ * - preview_height: The lesser of preview_image_height or sample image height.
+ * - preview_width: The lesser of preview_image_width or sample image width.
+ * - preview_url: The URL of the preview image.
+ * - preview_attributes: HTML attributes for the preview style.
+ * - preview_image: HThe rendered preview image..
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_style_preview()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="image-style-preview preview clearfix">
+  {# Preview of the original image. #}
+  <div class="preview-image-wrapper">
+      {{ 'original' | t }} (<a href="{{ original_url }}">{{ 'view actual size'|t }}</a>)
+      <div class="preview-image original-image" style="{{ original_attributes.style }}">
+        <a href="{{ original_url }}">
+          {{ original_image }}
+        </a>
+      <div class="height" style="height: {{ original_height }}px"><span>{{ original_image_height }}px</span></div>
+      <div class="width" style="width: {{ original_width }}px"><span>{{ original_image_width }}px</span></div>
+    </div>
+  </div>{# End preview-image-wrapper. #}
+
+  {# Preview of the image style. #}
+  <div class="preview-image-wrapper">
+    {{ style_name }} (<a href="{{ preview_url }}">{{ 'view actual size'|t }}</a>)
+    <div class="preview-image modified-image" style="{{ preview_attributes.style }}">
+      <a href="{{ preview_url }}">
+        {{ preview_image }}
+      </a>
+      <div class="height" style="height: {{ preview_height }}px"><span>{{ preview_image_height }}px</span></div>
+      <div class="width" style="width: {{ preview_width }}px"><span>{{ preview_image_width }}px</span></div>
+    </div>
+  </div>{# End preview-image-wrapper. #}
+</div>
diff --git a/core/modules/image/templates/image-style.html.twig b/core/modules/image/templates/image-style.html.twig
new file mode 100644
index 0000000..13575cf
--- /dev/null
+++ b/core/modules/image/templates/image-style.html.twig
@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Default theme implementation for an image using a specific image style.
+ *
+ * Available variables:
+ * - attributes: A collection of image attributes, including the following:
+ *   - attributes.src: Full URL or relative path to the image file.
+ *   - attributes.class: One or more classes to be applied to the image.
+ *   - attributes.width: The width of the image (if known).
+ *   - attributes.height: The height of the image (if known).
+ *   - attributes.title: The title of the image.
+ *   - attributes.alt: The alternate text for the image. HTML 4 and Xhtml 1.0
+ *     always require an alt attribute. The HTML 5 draft allows the alt
+ *     attribute to be omitted in some cases. Therefore, this variable defaults
+ *     to an empty string, but can be set to NULL for the attribute to be
+ *     omitted. Usually, neither omission nor an empty string satisfies
+ *     accessibility requirements, so it is strongly encouraged for code
+ *     calling theme('image') to pass a meaningful value for this variable.
+ *       http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8
+ *       http://www.w3.org/TR/xhtml1/dtds.html
+ *       http://dev.w3.org/html5/spec/Overview.html#alt
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_style()
+ *
+ * @ingroup themeable
+ */
+#}
+{# @todo Remove and consolidate with image: http://drupal.org/node/1804614 #}
+{% spaceless %}<img src="{{ attributes.src }}"{{ attributes }} />{% endspaceless %}
diff --git a/core/modules/image/templates/image-widget.html.twig b/core/modules/image/templates/image-widget.html.twig
new file mode 100644
index 0000000..c347f7d
--- /dev/null
+++ b/core/modules/image/templates/image-widget.html.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Default theme implementation for an image field widget.
+ *
+ * Available variables:
+ * - attributes: A list of element attributes.
+ * - preview: A rendered preview image.
+ * - data: Render elements of image data.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_widget()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="{{ attributes.class }}"{{ attributes }}>
+  {% if preview is defined %}
+    <div class="image-preview">
+      {{ preview }}
+    </div>
+  {% endif %}
+  <div class="image-widget-data">
+    {{ data }}
+  </div>
+</div>