#1 Introduction to the <img> Tag and Image formats
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
.jpgfiles 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)
#1 Introduction to the <img> Tag and Image formats
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><img></code> Tag and Different Image Formats</h1>
<p>
The <code><img></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 })