diff --git a/core/modules/picture/picture.module b/core/modules/picture/picture.module
index e5a66dd..80f62ff 100644
--- a/core/modules/picture/picture.module
+++ b/core/modules/picture/picture.module
@@ -159,7 +159,7 @@ function picture_theme() {
     'picture' => array(
       'variables' => array(
         'style_name' => NULL,
-        'path' => NULL,
+        'uri' => NULL,
         'width' => NULL,
         'height' => NULL,
         'alt' => '',
@@ -167,6 +167,7 @@ function picture_theme() {
         'attributes' => array(),
         'breakpoints' => array(),
       ),
+      'template' => 'picture',
     ),
     'picture_formatter' => array(
       'variables' => array(
@@ -175,20 +176,24 @@ function picture_theme() {
         'image_style' => NULL,
         'breakpoints' => array(),
       ),
+      'template' => 'picture-formatter',
     ),
     'picture_source' => array(
       'variables' => array(
         'src' => NULL,
         'srcset' => NULL,
-        'dimension' => NULL,
+        'dimensions' => NULL,
         'media' => NULL,
       ),
+      'template' => 'picture-source',
     ),
   );
 }
 
 /**
- * Returns HTML for a picture field formatter.
+ * Prepares variables for picture formatter templates.
+ *
+ * Default template: picture-formatter.html.twig.
  *
  * @param array $variables
  *   An associative array containing:
@@ -199,9 +204,15 @@ function picture_theme() {
  *
  * @ingroup themeable
  */
-function theme_picture_formatter($variables) {
+function template_preprocess_picture_formatter(&$variables) {
   if (!isset($variables['breakpoints']) || empty($variables['breakpoints'])) {
-    return theme('image_formatter', $variables);
+    $variables['image'] = array(
+      '#theme' => 'image_formatter',
+      '#item' => $variables['item'],
+      '#image_style' => $variables['image_style'],
+      '#path' => $variables['path'],
+    );
+    return;
   }
 
   $item = $variables['item'];
@@ -211,25 +222,32 @@ function theme_picture_formatter($variables) {
     unset($item['title']);
   }
 
-  $item['style_name'] = $variables['image_style'];
-  $item['breakpoints'] = $variables['breakpoints'];
-
-  if (!isset($item['path']) && isset($variables['uri'])) {
-    $item['path'] = $variables['uri'];
-  }
-  $output = theme('picture', $item);
+  $variables['image'] = array(
+    '#theme' => 'picture',
+    '#style_name' => $variables['image_style'],
+    '#uri' => $item['uri'],
+    '#width' => $item['width'],
+    '#height' => $item['height'],
+    '#breakpoints' => $variables['breakpoints'],
+    '#alt' => isset($item['alt']) ? $item['alt'] : NULL,
+    '#title' => isset($item['title']) ? $item['title'] : NULL,
+    '#attributes' => isset($item['attributes']) ? $item['attributes'] : NULL,
+  );
 
   if (isset($variables['path']['path'])) {
-    $path = $variables['path']['path'];
+    $variables['path']['attributes'] = array();
+    if (isset($variables['path']['options']['attributes'])) {
+      $variables['path']['attributes'] = new Attribute($variables['path']['options']['attributes']);
+    }
     $options = isset($variables['path']['options']) ? $variables['path']['options'] : array();
-    $options['html'] = TRUE;
-    $output = l($output, $path, $options);
+    $variables['path']['path'] = url($variables['path']['path'], $options);
   }
-  return $output;
 }
 
 /**
- * Returns HTML for a picture.
+ * Prepares variables for picture templates.
+ *
+ * Default template: picture.html.twig.
  *
  * @param $variables
  *   An associative array containing:
@@ -242,7 +260,7 @@ function theme_picture_formatter($variables) {
  *
  * @ingroup themeable
  */
-function theme_picture($variables) {
+function template_preprocess_picture(&$variables) {
   // Make sure that width and height are proper values
   // If they exists we'll output them
   // @see http://www.w3.org/community/respimg/2012/06/18/florians-compromise/
@@ -255,13 +273,14 @@ function theme_picture($variables) {
     unset($variables['height']);
   }
 
-  $sources = array();
+  $variables['sources'] = array();
   $output = array();
 
   // Fallback image, output as source with media query.
-  $sources[] = array(
-    'src' => image_style_url($variables['style_name'], $variables['uri']),
-    'dimensions' => picture_get_image_dimensions($variables),
+  $variables['sources'][] = array(
+    '#theme' => 'picture_source',
+    '#src' => image_style_url($variables['style_name'], $variables['uri']),
+    '#dimensions' => picture_get_image_dimensions($variables),
   );
 
   // All breakpoints and multipliers.
@@ -278,50 +297,54 @@ function theme_picture($variables) {
 
       // Only one image, use src.
       if (count($new_sources) == 1) {
-        $sources[] = array(
-          'src' => image_style_url($new_sources[0]['style_name'], $new_sources[0]['uri']),
-          'dimensions' => picture_get_image_dimensions($new_sources[0]),
-          'media' => $breakpoint->mediaQuery,
+        $variables['sources'][] = array(
+          '#theme' => 'picture_source',
+          '#src' => image_style_url($new_sources[0]['style_name'], $new_sources[0]['uri']),
+          '#dimensions' => picture_get_image_dimensions($new_sources[0]),
+          '#media' => $breakpoint->mediaQuery,
         );
       }
       else {
-        // Mutliple images, use srcset.
+        // Multiple images, use srcset.
         $srcset = array();
         foreach ($new_sources as $new_source) {
           $srcset[] = image_style_url($new_source['style_name'], $new_source['uri']) . ' ' . $new_source['#multiplier'];
         }
-        $sources[] = array(
-          'srcset' => implode(', ', $srcset),
-          'dimensions' => picture_get_image_dimensions($new_sources[0]),
-          'media' => $breakpoint->mediaQuery,
+        $variables['sources'][] = array(
+          '#theme' => 'picture_source',
+          '#srcset' => implode(', ', $srcset),
+          '#dimensions' => picture_get_image_dimensions($new_sources[0]),
+          '#media' => $breakpoint->mediaQuery,
         );
       }
     }
   }
 
-  if (!empty($sources)) {
-    $attributes = array();
-    foreach (array('alt', 'title') as $key) {
-      if (isset($variables[$key])) {
-        $attributes[$key] = $variables[$key];
-      }
-    }
-    $output[] = '<picture' . new Attribute($attributes) . '>';
-
-    // Add source tags to the output.
-    foreach ($sources as $source) {
-      $output[] = theme('picture_source', $source);
+  // Prepare picture tag attributes.
+  $attributes = array();
+  foreach (array('alt', 'title') as $key) {
+    if (isset($variables[$key])) {
+      $attributes[$key] = $variables[$key];
     }
-
-    // Output the fallback image.
-    $output[] = '<noscript>' . theme('image_style', $variables) . '</noscript>';
-    $output[] = '</picture>';
-    return implode("\n", $output);
   }
+  $variables['attributes'] = new Attribute($attributes);
+
+  // Prepare noscript fallback image.
+  $variables['fallback'] = array(
+    '#theme' => 'image_style',
+    '#uri' => $variables['uri'],
+    '#width' => $variables['width'],
+    '#height' => $variables['height'],
+    '#style_name' => $variables['style_name'],
+    '#alt' => isset($variables['alt']) ? $variables['alt'] : NULL,
+    '#title' => isset($variables['title']) ? $variables['title'] : NULL,
+  );
 }
 
 /**
- * Returns HTML for a source tag.
+ * Prepares variables for source tag templates.
+ *
+ * Default template: picture-source.html.twig.
  *
  * @param type $variables
  *   An associative array containing:
@@ -334,23 +357,8 @@ function theme_picture($variables) {
  *
  * @ingroup themeable
  */
-function theme_picture_source($variables) {
-  $output = array();
-  if (isset($variables['media']) && !empty($variables['media'])) {
-    if (!isset($variables['srcset'])) {
-      $output[] = '<!-- <source media="' . $variables['media'] . '" src="' . $variables['src'] . '" ' . new Attribute($variables['dimensions']) . ' /> -->';
-      $output[] = '<source media="' . $variables['media'] . '" src="' . $variables['src'] . '" ' . new Attribute($variables['dimensions']) . '/>';
-    }
-    elseif (!isset($variables['src'])) {
-      $output[] = '<!-- <source media="' . $variables['media'] . '" srcset="' . $variables['srcset'] . '" ' . new Attribute($variables['dimensions']) . ' /> -->';
-      $output[] = '<source media="' . $variables['media'] . '" srcset="' . $variables['srcset'] . '" ' . new Attribute($variables['dimensions']) . ' />';
-    }
-  }
-  else {
-    $output[] = '<!-- <source src="' . $variables['src'] . '" ' . new Attribute($variables['dimensions']) . ' /> -->';
-    $output[] = '<source src="' . $variables['src'] . '" ' . new Attribute($variables['dimensions']) . '/>';
-  }
-  return implode("\n", $output);
+function template_preprocess_picture_source(&$variables) {
+  $variables['attributes'] = new Attribute($variables['dimensions']);
 }
 
 /**
diff --git a/core/modules/picture/templates/picture-formatter.html.twig b/core/modules/picture/templates/picture-formatter.html.twig
new file mode 100644
index 0000000..0e95f48
--- /dev/null
+++ b/core/modules/picture/templates/picture-formatter.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a picture field formatter.
+ *
+ * Available variables:
+ * - image: Picture element, if picture has breakpoint sources, otherwise img
+ *   element.
+ * - path: An optional array containing the link 'path' and attributes
+ *   'attributes'.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_picture_formatter()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if path %}
+  <a href="{{ path.path }}" {{ attributes }}>{{ image }}</a>
+{% else %}
+  {{ image }}
+{% endif %}
diff --git a/core/modules/picture/templates/picture-source.html.twig b/core/modules/picture/templates/picture-source.html.twig
new file mode 100644
index 0000000..530d97f
--- /dev/null
+++ b/core/modules/picture/templates/picture-source.html.twig
@@ -0,0 +1,32 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a picture source tag.
+ *
+ * Available variables:
+ * - media: The media query to use.
+ * - srcset: The srcset containing the the path of the image file or a full
+ *   URL and optionally multipliers.
+ * - src: Either the path of the image file (relative to base_path()) or a
+ *   full URL.
+ * - dimensions: The width and height of the image (if known).
+ * - attributes: additional HTML attributes for source tag.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_picture_source()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if media %}
+  {% if src %}
+  <!-- <source media="{{ media }}" src="{{ src }}" {{ attributes }} /> -->
+    <source media="{{ media }}" src="{{ src }}" {{ attributes }}/>
+  {% elseif srcset %}
+    <!-- <source media="{{ media }}" srcset="{{ srcset }}" {{ attributes }} /> -->
+    <source media="{{ media }}" srcset="{{ srcset }}" {{ attributes }} />
+  {% endif %}
+{% else %}
+  <!-- <source src="{{ src }}" {{ attributes }} /> -->
+  <source src="{{ src }}" {{ attributes }}/>
+{% endif %}
diff --git a/core/modules/picture/templates/picture.html.twig b/core/modules/picture/templates/picture.html.twig
new file mode 100644
index 0000000..24b9a8d
--- /dev/null
+++ b/core/modules/picture/templates/picture.html.twig
@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a picture tag.
+ *
+ * Available variables:
+ * - sources: Source elements.
+ * - attributes: HTML attributes for picture element.
+ * - fallback: Fallback image for non-JS browsers.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_picture()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if sources %}
+  <picture {{ attributes }}>
+    {% for source in sources %}
+      {{ source }}
+    {% endfor %}
+    <noscript>{{ fallback }}</noscript>
+  </picture>
+{% endif %}