@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h1>Best-Possible Image for Every Screen &amp; Device</h1>
      <h2>...using <code>img</code> and <code>srcset</code></h2>
      <p>
        HTML has a few ways to show an image, and you should know which way is best. Discover: 
      </p>
      <ol>
        <li><code>img</code> for your standard image</li>
        <li>enhancing images with size-detection using <code>srcset</code> and <code>sizes</code></li>
      </ol>
    </div>
  </div>
  <div class="alert alert-info">
    These examples are optimized. 
    The browser will only load new images, if they are larger than the previous one. 
    So to see the effect, you must make the browser very small (narrow), reload the page, and then drag it wider. 
    <br>
    <br>
    Some examples show the currently loaded URL below it, and the difference may be very small as it changes. So look closely 🔍
  </div>
  @Html.Partial("../shared/KitBaseClassInfoBox.cshtml", new { ServiceName = "Image", Service = "IImageService" })

  <h2>Responsive <code>img</code> with <code>srcset</code> and <code>sizes</code> To Load Different Pictures</h2>
  <p>
    With <code>srcset</code> on the <code>img</code> tag you can tell the browser to load different images based on screen size. 
    To really get the hang of this, best check out <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images" target="_blank">the MDN docs</a>.
  </p>


<!-- unimportant stuff, hidden -->

  
  <img loading="lazy" class="img-fluid" alt="Image SrcSet Demo"
    src="@App.Path/img/assets/jellyfish-img-srcset-1000.jpg"
    srcset="@App.Path/img/assets/jellyfish-img-srcset-2000.jpg 2000w,
            @App.Path/img/assets/jellyfish-img-srcset-1000.jpg 1000w,
            @App.Path/img/assets/jellyfish-img-srcset-500.jpg 500w,
            @App.Path/img/assets/jellyfish-img-srcset-250.jpg 250w,">



<h3>Example with Automatically Resized Files for Each Resolution</h3>

  
  @{
    var tomatoPicUrl = App.Path +  "/img/assets/pexels-pixabay-533288.jpg";
  }
  @Kit.Image.Img(tomatoPicUrl)



<h3>Example with Automatic Resize and Special Settings</h3>
<p>
  The following example (and the ones after this) will use a flatter image to make it easier to see all the samples. 
  To achieve this, we must create <code>ResizeSettings</code> for this. It will be based on the default <code>Content</code> settings.
</p>

  
  @{
    var flatSettings = Kit.Image.Settings(Settings.Images.Content, aspectRatio: "8:1");
  }
  @Kit.Image.Img(tomatoPicUrl, settings: flatSettings)



<h3>Example with Automatic Resize and Special SrcSets</h3>
<p>
  The default settings contains a list of default resizes - which is why the examples before just worked. 
  You can also specify your own, according to the specs in the
  <a href="https://docs.2sxc.org/net-code/images/srcset.html" target="_blank">srcset docs</a>. 
</p>

  
  @Kit.Image.Img(tomatoPicUrl, settings: flatSettings, recipe: "1600,1200,1000,900,800,700,600,500,400")



<h3>Automatic Resize with Custom <code>alt</code> and <code>class</code> </h3>

  
  @Kit.Image.Img(tomatoPicUrl, settings: flatSettings, imgAlt: "SEO Text", imgClass: "border border-primary")



<h3>Automatic Resize with Detailed Control</h3>

  
  @{
    var imgControlled = Kit.Image.Img(tomatoPicUrl, settings: flatSettings);
  }
  @imgControlled.Img.Id("Some-Id").Style("Width: 75%")



<h3>Automatic Resize with Full Control</h3>

  
  @{
    var imgFullControl = Kit.Image.Img(tomatoPicUrl, settings: flatSettings);
  }
  <img loading="lazy" src="@imgFullControl.Src" srcset="@imgFullControl.SrcSet" title="Hover to see this">


  @* 2sxclint:disable:no-inline-script *@
<script>
  // Activate the controls which show the current live src of each picture/image tag
  showChangingSrc("img-srcset")
  showChangingSrc('img-srcset-auto');
  showChangingSrc('img-srcset-auto-srcset');
  showChangingSrc('img-srcset-auto2');
  showChangingSrc('img-srcset-auto3');
  showChangingSrc('img-srcset-auto4');
  showChangingSrc('img-srcset-auto5');
</script>

@* 
Photo by <a href="https://unsplash.com/@dorianbaumann?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Dorian Baumann</a> on <a href="https://unsplash.com/s/photos/aescher?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Werdenberg: Photo by <a href="https://unsplash.com/@calina?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Georg Bommeli</a> on <a href="https://unsplash.com/s/photos/buchs-sg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

*@
  <div class="alert alert-info">
    <strong>Credits: </strong>
    <ol>
      <li>
        Koi fish Photo by <a href="https://unsplash.com/@("@")agusprianto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">agus prianto</a> on <a href="https://unsplash.com/s/photos/colorful-shrimp?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
      </li>
      <li>
        Jellyfish Photo by <a href="https://unsplash.com/@("@")kkkaran?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Karan Karnik</a> on <a href="https://unsplash.com/s/photos/sea-life?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
      </li>
    </ol>
  </div>
</hide>

@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })