diff --git a/core/modules/image/image.admin.inc b/core/modules/image/image.admin.inc
index 165d26d..b55847d 100644
--- a/core/modules/image/image.admin.inc
+++ b/core/modules/image/image.admin.inc
@@ -81,71 +81,79 @@ function theme_image_style_effects($variables) {
  *   - style: \Drupal\image\ImageStyleInterface image style being previewed.
  */
 function template_preprocess_image_style_preview(&$variables) {
+
+  // Style information.
   $style = $variables['style'];
-  $image_factory = \Drupal::service('image.factory');
+  $variables['style_id'] = String::checkPlain($style->id());
+  $variables['style_name'] = String::checkPlain($style->label());
 
-  // Sample image path, width and height.
-  $sample = array(
-    'path' => \Drupal::config('image.settings')->get('preview_image'),
-    'width' => 160,
-    'height' => 160,
-  );
+  // Cache bypass token.
+  $variables['cache_bypass'] = REQUEST_TIME;
 
-  // Init the set of original and preview images data.
-  $variables += array(
-    'style_id' => String::checkPlain($style->id()),
-    'style_name' => String::checkPlain($style->label()),
-    'original' => array(),
-    'derivative' => array(),
-  );
+  // Sample image info.
+  $sample_width = 160;
+  $sample_height = 160;
+  $image_factory = \Drupal::service('image.factory');
 
-  $images = array(
-    'original' => array(
-      'label' => t('Sample original image'),
-      'path' => $sample['path'],
-    ),
-    'derivative' => array(
-      'label' => t('Sample modified image'),
-      'path' => $style->buildUri($sample['path']),
-    ),
+  // Set up original file information.
+  $original_path = \Drupal::config('image.settings')->get('preview_image');
+  $original_image = $image_factory->get($original_path);
+  $variables['original_url'] = file_create_url($original_path);
+  $variables['original'] = array(
+    'width' => $original_image->getWidth(),
+    'height' => $original_image->getHeight(),
   );
+  if ($original_image->getWidth() > $original_image->getHeight()) {
+    $variables['preview']['original']['width'] = min($original_image->getWidth(), $sample_width);
+    $variables['preview']['original']['height'] = round($variables['preview']['original']['width'] / $original_image->getWidth() * $original_image->getHeight());
+  }
+  else {
+    $variables['preview']['original']['height'] = min($original_image->getHeight(), $sample_height);
+    $variables['preview']['original']['width'] = round($variables['preview']['original']['height'] / $original_image->getHeight() * $original_image->getWidth());
+  }
+  $variables['original']['style'] = 'width: ' . $variables['preview']['original']['width'] . 'px; height: ' . $variables['preview']['original']['height'] . 'px;';
 
+  // Set up preview file information.
+  $preview_file = $style->buildUri($original_path);
   // Create derivative if necessary.
-  if (!file_exists($images['derivative']['path'])) {
-    $style->createDerivative($sample['path'], $images['derivative']['path']);
+  if (!file_exists($preview_file)) {
+    $style->createDerivative($original_path, $preview_file);
   }
-
-  foreach ($images as $type => $image_info) {
-    $image = $image_factory->get($image_info['path']);
-    if ($image->getWidth() > $image->getHeight()) {
-      $width = min($image->getWidth(), $sample['width']);
-      $height = round($width / $image->getWidth() * $image->getHeight());
-    }
-    else {
-      $height = min($image->getHeight(), $sample['height']);
-      $width = round($height / $image->getHeight() * $image->getWidth());
-    }
-    $variables[$type]['url'] = file_create_url($image_info['path']);
-    $variables[$type]['width'] = $image->getWidth();
-    $variables[$type]['height'] = $image->getHeight();
-    $variables[$type]['attributes'] = array(
-      'width' => $width,
-      'height' => $height,
-      'style' => String::format('width: @width; height: @height;',
-        array(
-          '@width' => $width . 'px',
-          '@height' => $height . 'px',
-        )
-      ),
-      'alt' => $image_info['label'],
-    );
-    $variables[$type]['rendered'] = array(
-      '#theme' => 'image',
-      '#uri' => $image_info['path'],
-      '#alt' => $image_info['label'],
-      '#attributes' => $variables[$type]['attributes'],
-    );
+  $preview_image = $image_factory->get($preview_file);
+  $variables['derivative_url'] = file_create_url($preview_file);
+  $variables['derivative'] = array(
+    'width' => $preview_image->getWidth(),
+    'height' => $preview_image->getHeight(),
+  );
+  if ($preview_image->getWidth() > $preview_image->getHeight()) {
+    $variables['preview']['derivative']['width'] = min($preview_image->getWidth(), $sample_width);
+    $variables['preview']['derivative']['height'] = round($variables['preview']['derivative']['width'] / $preview_image->getWidth() * $preview_image->getHeight());
   }
+  else {
+    $variables['preview']['derivative']['height'] = min($preview_image->getHeight(), $sample_height);
+    $variables['preview']['derivative']['width'] = round($variables['preview']['derivative']['height'] / $preview_image->getHeight() * $preview_image->getWidth());
+  }
+  $variables['derivative']['style'] = 'width: ' . $variables['preview']['derivative']['width'] . 'px; height: ' . $variables['preview']['derivative']['height'] . 'px;';
+
+  // Build the preview of the original image.
+  $variables['original']['rendered'] = array(
+    '#theme' => 'image',
+    '#uri' => $original_path,
+    '#alt' => t('Sample original image'),
+    '#title' => '',
+    '#attributes' => $variables['original'],
+  );
+
+  // In the preview, timestamps are added to prevent caching of images.
+  // Build the preview of the image style.
+  $variables['derivative']['rendered'] = array(
+    '#theme' => 'image',
+    '#uri' => $variables['derivative_url'] . '?cache_bypass=' . $variables['cache_bypass'],
+    '#alt' => t('Sample modified image'),
+    '#title' => '',
+    '#attributes' => $variables['derivative'],
+  );
+
 }
 
 /**
diff --git a/core/modules/image/templates/image-style-preview.html.twig b/core/modules/image/templates/image-style-preview.html.twig
index 1f52a67..59b83dd 100644
--- a/core/modules/image/templates/image-style-preview.html.twig
+++ b/core/modules/image/templates/image-style-preview.html.twig
@@ -6,18 +6,24 @@
  * Available variables:
  * - style_id: The ID of the image style.
  * - style_name: The name of the image style.
+ * - cache_bypass: A timestamp token used to avoid browser caching of images.
+ * - original_url: The URL of the original image.
  * - original: An associative array containing:
- *   - url: The URL of the original image.
  *   - width: The width in pixels of the original image.
  *   - height: The height in pixels of the original image.
- *   - attributes: HTML sample attributes for the original style.
- *   - rendered: The rendered original image.
+ *   - rendered: The render array for the original image.
+ * - derivative_url: The URL of the derivative image.
  * - derivative: An associative array containing:
- *   - url: The URL of the derivative image.
  *   - width: The width in pixels of the derivative image.
  *   - height: The height in pixels of the derivative image.
- *   - attributes: HTML sample attributes for the derivative style.
  *   - rendered:  The rendered derivative image.
+ * - preview: An associative array containing:
+ *   - original: An associative array containing:
+ *     - width: The width in pixels of the original image in the preview.
+ *     - height: The height in pixels of the original image in the preview.
+ *   - derivative: An associative array containing:
+ *     - width: The width in pixels of the derivative image in the preview.
+ *     - height: The height in pixels of the derivative image in the preview.
  *
  * @see template_preprocess_image_style_preview()
  *
@@ -27,25 +33,25 @@
 <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'|t }} (<a href="{{ original_url }}">{{ 'view actual size'|t }}</a>)
+      <div class="preview-image original-image" style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;">
+        <a href="{{ original_url }}">
           {{ original.rendered }}
         </a>
-      <div class="height" style="height: {{ original.attributes.height }}px"><span>{{ original.height }}px</span></div>
-      <div class="width" style="width: {{ original.attributes.width }}px"><span>{{ original.width }}px</span></div>
+      <div class="height" style="height: {{ preview.original.height }}px"><span>{{ original.height }}px</span></div>
+      <div class="width" style="width: {{ preview.original.width }}px"><span>{{ original.width }}px</span></div>
     </div>
   </div>{# End preview-image-wrapper. #}
 
   {# Derivative of the image style. #}
   <div class="preview-image-wrapper">
-    {{ style_name }} (<a href="{{ derivative.url }}">{{ 'view actual size'|t }}</a>)
-    <div class="preview-image derivative-image" style="{{ derivative.attributes.style }}">
-      <a href="{{ derivative.url }}">
+    {{ style_name }} (<a href="{{ derivative_url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
+    <div class="preview-image modified-image" style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;">
+      <a href="{{ derivative_url }}?{{ cache_bypass }}">
         {{ derivative.rendered }}
       </a>
-      <div class="height" style="height: {{ derivative.attributes.height }}px"><span>{{ derivative.height }}px</span></div>
-      <div class="width" style="width: {{ derivative.attributes.width }}px"><span>{{ derivative.width }}px</span></div>
+      <div class="height" style="height: {{ preview.derivative.height }}px"><span>{{ derivative.height }}px</span></div>
+      <div class="width" style="width: {{ preview.derivative.width }}px"><span>{{ derivative.width }}px</span></div>
     </div>
   </div>{# End preview-image-wrapper. #}
 </div>