Skip to main content
Home  › ... Razor

Images Tutorial

Tutorial Home › Images
Show current Content in the Ouput
#1 Introduction to the <img> Tag and Image formats
Resize and Crop Images on the Server
Resources

The <img> Tag and Different Image Formats

The <img> tag is used to show Images. It's important that you know the core image formats:

  • JPG
    .jpg files are ideal for Photos, as they compress natural color gradients very well. It doesn't support transparancy, which is a problem for various use cases.
  • PNG
    PNG is similar to GIF and is perfect for images which have areas with the exactly same color - something that's common in artificial images like Logos, but not in Photos. It also supports transparencies. Unfortunately the compression isn't so good for photos (see sample below).
  • WebP
    WebP combines and levereges the features of JPG and PNG compression. With WebP you can have lossy compression and an alpha channel. For the lossy compression which is similar to JPG, WEBP optimizes the process of DCT quantization by using prediction models and compressing it using Arithmetic encoding instead of Huffman. The alpha channel remains intact by compressing it seperatly using Huffman.

Standard img Image

This is used for showing an image, and we won't go into much detail, because you probably already know this one. It shows the same picture as jpg, png and webp:


(jpg 15k)

(png 11k - note the dithering)

(webp 8k)
<div class="row">
  <div class="col-sm"><img loading="lazy" src="@App.Path/img/assets/koi-400.jpg"> <br> (jpg 15k)</div>
  <div class="col-sm"><img loading="lazy" src="@App.Path/img/assets/koi-400.png"> <br> (png 11k - note the dithering)</div>
  <div class="col-sm"><img loading="lazy" src="@App.Path/img/assets/koi-400.webp"> <br> (webp 8k)</div>
</div>
Show current Content in the Ouput
#1 Introduction to the <img> Tag and Image formats
Resize and Crop Images on the Server

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

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


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h1>The <code>&lt;img&gt;</code> Tag and Different Image Formats</h1>
      <p>
        The <code>&lt;img&gt;</code> tag is used to show Images. 
        It's important that you know the core image formats:
      </p>
      <ul>
        <li><strong>JPG</strong> <br>
          <code>.jpg</code> files are ideal for Photos, as they compress natural color gradients very well. 
          It doesn't support transparancy, which is a problem for various use cases. 
        </li>
        <li><strong>PNG</strong> <br>
          PNG is similar to <strong>GIF</strong> and is perfect for images which have areas with the exactly same color - something that's common in artificial images like Logos, but not in Photos. 
          It also supports transparencies. Unfortunately the compression isn't so good for photos (see sample below).
        </li>
        <li>
          <strong>WebP</strong> <br>
          WebP combines and levereges the features of JPG and PNG compression. With WebP you can have lossy compression and an alpha channel. 
          For the lossy compression which is similar to JPG, WEBP optimizes the process of DCT quantization by using prediction models 
          and compressing it using <a href="https://en.wikipedia.org/wiki/Arithmetic_coding">Arithmetic encoding</a> instead of Huffman.
          The alpha channel remains intact by compressing it seperatly using Huffman. 
        </li>
      </ul>
    </div>
  </div>


Standard img Image This is used for... <!-- unimportant stuff, hidden -->

  <div class="row">
    <div class="col-sm"><img loading="lazy" src="@App.Path/img/assets/koi-400.jpg"> <br> (jpg 15k)</div>
    <div class="col-sm"><img loading="lazy" src="@App.Path/img/assets/koi-400.png"> <br> (png 11k - note the dithering)</div>
    <div class="col-sm"><img loading="lazy" src="@App.Path/img/assets/koi-400.webp"> <br> (webp 8k)</div>
  </div>


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