Oqtane Tutorials
Oqtane Tutorials

Images and Pictures Tutorial

Tutorial Home › Images
Working with Block Contents
#1 The <img> Tag and Different Image Formats
The Link.Image(...) Helper
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.

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:

⬇️ Result | Source ➡️


(jpg 15k)

(png 11k - note the dithering)

(webp 8k)
@inherits Custom.Hybrid.Razor14
@{
  var imgPath = App.Path + "/assets/img-resize";
}
<div class="row">
  <div class="col-sm"><img loading="lazy" src="@imgPath/koi-400.jpg"> <br> (jpg 15k)</div>
  <div class="col-sm"><img loading="lazy" src="@imgPath/koi-400.png"> <br> (png 11k - note the dithering)</div>
  <div class="col-sm"><img loading="lazy" src="@imgPath/koi-400.webp"> <br> (webp 8k)</div>
</div>

 

Working with Block Contents
#1 The <img> Tag and Different Image Formats
The Link.Image(...) Helper