Clever Way of Formatting Images: Auto Format

, Image Format

Clever Way of Formatting Images: Auto Format

Today there are many image formats available. Each of them serves a special purpose, but in this post we will be looking at which formats are suitable for webpages and what is image auto-formatting. To begin with, we first need to understand the basics of the two most commonly used formats, JPEG and PNG. PNG stand for "Portable Network Graphics". It is a lossless image format which can support RGB, RGBA and CMYK colorspaces. JPEG is a bit different. It stands for "Joint Photographic Experts Group" which is the committee that created and maintains the standards. Unlike PNG, JPEG is a lossy image format, which means the quality of image decreases as well as the storage space. However, the level of compression is variable therefore it can be adjusted according to the user's needs.

We get the basics but what is next-gen image formats? According to the Google, next-gen image formats are:

"JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data."

What that means is that next-gen image formats have much more advanced compression methods. Therefore, they are better to use in websites for getting a better performance. However, there are still some issues. You cannot simply convert all images in your website to a single format. Not every browser supports these image formats. Also, every image should have a suitable format for its required purpose and it should be as small as possible.

For that reason, we need image auto-formatting.

What is image auto-formatting? Image auto-formatting is a simple system that checks browser compatibility and decides what to do accordingly. In image4io, our formatter works in a following way;

  1. To enable it, image format selector needs to be selected to "auto".
  2. It fetches the browser info and decides that if the browser is compatible with the format ".webp".
  3. If so it converts the image to .wepb and returns the resulting image.
  4. If not it returns the image in its original format.

It may seems simple at first sight, but it is useful feature to have, since users save a lot of time. Converting each image manually is a really labor intensive task.

In addition, features of the auto-formatter can be expanded in the future to support additional formats depending on the browser support of those formats.