UI Development

Next Gen Image Formats

Basic idea about image formats :

Image files are meant for organizing and storing digital images. Image file formats store the data in compressed and uncompressed (which may be lossy or lossless) formats.

Lossy compression : This algorithm preserves the representation of original image (uncompressed format). The resulted images appear to be a perfect copy but it is actually not a perfect copy. This compression achieves images with smaller sizes.

Lossless compression : This algorithm reduces the size of the file. But it preserves the perfect copy of original (uncompressed format) image. This compression generally (but not always) results in files with large size.

 

Modern image formats :

The image formats which we use regularly are PNG (Portable Network Graphics), JPEG (Joint Photographic Expert Group), SVG (Scalable Vector Graphics) etc. Apart from these image formats there are various modern image formats like Webp, Jpeg 2000, Jpeg XR etc. These formats have superior compression and quality characteristics compared to Jpeg and png.

So encoding our images into these modern formats results in faster loading and consumes less cellular data.

WebP :

Webp is one of the new open image formats developed by Google for the web. This image format provides both lossy and lossless compression for images using predictive coding. Predictive Coding is the approach to achieve best compression without significant overload. In this, there will be transmission of difference between current pixel and previous pixel. Images of this format are saved with an extension .webp.

Webp reduces the image size without sacrificing quality of the image and thus saves the storage space. This helps to load pictures faster and improve SEO (Search Engine Optimization) performance. This saves 40% of the file size by deleting unimportant details of the image.

We can convert the images from Webp to other formats and other formats to Webp using encoders and decoders cwebp, dwebp respectively.

We can use cwebp on the command line to convert PNG and JPEG images into Webp format with specified quality range.

In the above, quality range is 80.

Similarly, we can convert webp images into other formats by using dwebp.

Browser Support :

https://caniuse.com/#feat=webp

How to include the image in HTML, CSS :

In HTML :

In the HTML5, we use <picture> tag. This tag is nested with one or more elements having srcset attribute within which a reference to the webp image is added. The last nested child element is the <img> which is the fallback option. When the browser renders the image, if it supports webp it is fetched. Otherwise it will fallback to the jpeg/png specified in the src of last child.

Syntax

<picture>

<source srcset = “/img/image.webp” type=”image/webp”> </source>

<img src=”/img/image.png”>

</picture>

In CSS :

In CSS, rendering of the webp image is a bit trickier. Here we use the advantage of Modernizr. Modernizr detects weather browser supports webp or not. If the browser supports webp, Modernizr will add a class .webp to the <html> element of the web page. Otherwise it will add a class  .no-webp to the same. Then we can target the classes as below:

Syntax

.no-webp .background {

background-image: url(“fallback.png”);

}

.webp .background {

background-image: url(“image.webp”);

}

Visual comparison with other image formats :

  • Webp and PNG :

  • Webp and JPEG :

Challenges using Webp :

  1. Quality degrades with higher ration of compression
  2. Can’t get back the original image after compressing
  3. File size is large if we choose lossless compression of Webp
  4. Less browser support
  5. artifacting has plastic appearance

JPEG 2000 :

JPEG full form is Joint Photographic Experts Group. It is developed by JPEG committee. This was developed based on JPEG standard with a newly designed wavelet-based method. Wavelet is a wave like oscillation with an amplitude begins with ‘0’. This supports both lossy and lossless compression. Images of this format are saved with an an extension of .jp2. This supports progressive decoding. It is an efficient code stream that enables a viewer to see a lower quality of a particular image while the whole file has not been completely received or downloaded. The quality of image improves as more data bits are downloaded. It provides superior image quality when compared to JPEG file of same size. This format supports large image handling (>64k * 64k pixels).

Browser Support :

https://caniuse.com/#feat=jpeg2000

How to include the image in HTML and CSS :

In HTML :

In HTML5, we use a <picture> tag. this tag is nested with many elements having srcset attribute. This srcset attribute is referenced to a jpeg 2000 image. The last child element is the fallback option. Basically last child is the <img> tag within which image with other format like png, jpeg is included. If the browser supports JPEG 2000 formats it fetches the image, otherwise it will fallback to the last child with jpeg/png format and renders it.

Syntax

<picture>

<source srcset = “/img/image.jp2” type = “image/jp2″></source>

<source srcset=”/img/image.webp” type=”image/webp”></source>

<img src=”/img/image.png”>

</picture>

In CSS :

In CSS, we take the advantage of Modernizr to check weather the browser supports the jp2 format or not. Modernizr appends a class .jpeg200 if the browser supports the format. Otherwise it will append .no-jpeg2000 class to the <html> element of the page.

Syntax

.no-jpeg2000 .background {

background-image: url(“fallback.png”);

}

.jpeg2000 .background {

background-image: url(“image.jp2”);

}

Visual comparison with other formats :

  • jp2 and PNG :

  • jp2 and JPEG :


Challenges using JPEG2000 :

  1. No universal browser support
  2. Encoding JPEG2000 files is resource intensive, It requires much more memory spacing
  3. Encoding JPEG2000 is not as fast and as easy as JPEG
  4. This format is content adoptive. A low bitrate will make a mess of an image

JPEG XR :

JPEG Extended Range is developed by Microsoft. This is similar to TIFF (Taggged Image File Format). This combines the benefits of both optimized image quality and efficiency of compression together with very less complexity encoding and decoding implementation. It supports wide range of color encoding formats like monochrome, RGB etc. It provides more color accuracy for the image. It has many functionalities like:

  1. low computational and memory resource requirements
  2. high compression capability
  3. lossless and lossy compression
  4. low complexity in manipulations
  5. more color accuracy

This format requires a very small number of processing operations for both encoding and decoding. This format uses the same signal processing operations for both lossless and lossy compression operations. The main goal of this image format is to provide a compressed format while keeping the implementation requirements for encoding and decoding simple.

Browser Support :

https://caniuse.com/#feat=jpegxr

How to include the image in HTML and CSS :

In HTML :

Jpeg XR images can be included in the HTML code in the same way Webp, jpeg 2000 are included. We will have a <picture> tag in the HTML5 code. This tag is nested with a number of elements within which srcset is referenced to a JPEG XR image. The last child element is the fallback option for the browser if it doesn’t support the XR format. If the browser supports the XR format, it will fetch the image otherwise it will fallback to the last element within which image with png/jpeg is present.

Syntax

<picture>

<source srcset=”/img/image.jxr” type=”image/jxr”></source>

<source srcset=”/img/image.jp2″ type=”image/jp2″></source>

<source srcset=”/img/image.webp” type=”image/webp”></soure>

</picture>

In CSS :

In the CSS we will take the advantage of the Modernizr to verify weather the browser supports the XR format or not. If the browser supports the XR format modernizr will append the .jpegxr class to the <html> element of the page. If the browser doesn’t support then it will append .no-jpegxr class to the same.

Syntax

.no-jpegxr .background {

background-image: url(“fallback.png”);

}

.jpegxr .background {

background-image: url(“image.jpx”);

}

Visual comparison with other formats :

  • jpx and PNG :

  • jpx and JPEG :

Challenges using JPEGXR :

  1. Very poor browser support
  2. No support for opacity and transparency like PNG
  3. It does not support layered images
  4. It results in loss of data after compression

 

Thank you so much for going through the entire blog. I hope you will have a better understanding of various modern image formats now.

About The Author