diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module
index ea75e5e..3898e14 100644
--- a/core/modules/responsive_image/responsive_image.module
+++ b/core/modules/responsive_image/responsive_image.module
@@ -85,7 +85,6 @@ function responsive_image_theme() {
         'attributes' => array(),
         'mapping_id' => array(),
       ),
-      'function' => 'theme_responsive_image',
     ),
     'responsive_image_formatter' => array(
       'variables' => array(
@@ -157,7 +156,9 @@ function theme_responsive_image_formatter($variables) {
 }
 
 /**
- * Returns HTML for a responsive image.
+ * Prepares variables for a responsive image.
+ *
+ * Default template: responsive-image.html.twig.
  *
  * @param $variables
  *   An associative array containing:
@@ -173,7 +174,7 @@ function theme_responsive_image_formatter($variables) {
  *
  * @ingroup themeable
  */
-function theme_responsive_image($variables) {
+function template_preprocess_responsive_image(&$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/
@@ -187,23 +188,12 @@ function theme_responsive_image($variables) {
   }
 
   $image = \Drupal::service('image.factory')->get($variables['uri']);
-  $sources = responsive_image_build_source_tags($image, $variables);
-  $output = array();
-  $output[] = '<picture>';
-  if (!empty($sources)) {
-    // Internet Explorer 9 doesn't recognise source elements that are wrapped in
-    // picture tags. See http://scottjehl.github.io/picturefill/#ie9
-    $output[] = '<!--[if IE 9]><video style="display: none;"><![endif]-->';
-    foreach ($sources as $source) {
-      $output[] = drupal_render($source);
-    }
-    $output[] = '<!--[if IE 9]></video><![endif]-->';
-  }
+  $variables['sources'] = responsive_image_build_source_tags($image, $variables);
   // Output the fallback image. Use srcset in the fallback image to avoid
   // unnecessary preloading of images in older browsers. See
   // http://scottjehl.github.io/picturefill/#using-picture and
   // http://scottjehl.github.io/picturefill/#gotchas for more information.
-  $fallback_image = array(
+  $variables['fallback_image'] = array(
     '#theme' => 'image',
     '#srcset' => array(
       array(
@@ -213,15 +203,12 @@ function theme_responsive_image($variables) {
   );
   foreach (array('alt', 'title', 'attributes') as $key) {
     if (isset($variables[$key])) {
-      $fallback_image["#$key"] = $variables[$key];
+      $variables['fallback_image']["#$key"] = $variables[$key];
     }
   }
-  $output[] = drupal_render($fallback_image);
-  $output[] = '</picture>';
-  return SafeMarkup::set(implode("\n", $output));
 }
 /**
- * Helper function for theme_responsive_image().
+ * Helper function for template_preprocess_responsive_image().
  *
  * Builds an array of render arrays that will output <source> tags to be used in
  * a <picture> tag. In other words, this function provides the contents for a
diff --git a/core/modules/responsive_image/templates/responsive-image.html.twig b/core/modules/responsive_image/templates/responsive-image.html.twig
new file mode 100644
index 0000000..b929163
--- /dev/null
+++ b/core/modules/responsive_image/templates/responsive-image.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a <picture> tag.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the <picture> tag.
+ * - sources: The <source> tags for this <picture> tag.
+ * - fallback_image: The fallback <img> tag to use for this <picture> tag.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_responsive_image()
+ *
+ * @ingroup themeable
+ */
+#}
+<picture {{ attributes }} >
+  {% if sources %}
+    {#
+    Internet Explorer 9 doesn't recognise source elements that are wrapped in
+    picture tags. See http://scottjehl.github.io/picturefill/#ie9
+    #}
+    <!--[if IE 9]><video style="display: none;"><![endif]-->
+    {{ sources }}
+    <!--[if IE 9]></video><![endif]-->
+  {% endif %}
+  {{ fallback_image }}
+</picture>