{% load wagtailimages_tags %}
{% load wagtail_srcset_tags %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>wagtail-srcset test page</title>
    <style type="text/css">
      body, html {
        margin:0;
        padding:0;
      }
      #wrap {
        width:1300px;
        margin:0 auto;
      }
      #left_col {
        float:left;
        width:600px;
      }
      #right_col {
        float:right;
        width:600px;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <h1>Difference between native wagtail and wagtail_srcset image tag</h1>
      <h3>
        Both images have a width of 600px browser pixels. But 1px on a legacy
        device and 1px on a modern high pixel density device are not the same.
        Phones, tablets or modern computer displays often use up to 3 hardware
        pixels to show 1 browser pixel.
      </h3>
      <div id="left_col">
        <p>
          This is the original wagtail image created with
          {% verbatim image_tag %}
            {% image img width-600 %}
          {% endverbatim image_tag %}.
          It looks blurry because the original image is at first scaled
          to 600px width by wagtail and stored in a image rendition. Then
          this 600px image is shown on a high pixel densitiy screen. Since
          those screens use more hardware pixels to display those 600 browser
          pixels, the image is upscaled implicitly by a factor of 2 to 3. Ouch.
        </p>
        {% image img width-600 %}
      </div>
      <div id="right_col">
        <p>
          This is the image generated by
          {% verbatim image_tag %}
            {% srcset_image img width-600 %}
          {% endverbatim image_tag %}
          which should be sharper on modern
          display devices, because now 1 browser image pixel should roughly
          map to one pixel on the device again. We present the browser with
          different image size alternatives and the browser chooses the most
          appropriate size for it's devices pixel densitiy which could mean
          that a 1800px width image is displayed for a 600 browser pixel width
          image.
        </p>
        {% srcset_image img width-600 %}
      </div>
    </body>
  </html>
