Different Image Formats and Their Purpose .JPG, .PNG, .TIFF, .GIF etc.

Contents:

1.   JPG/JPEG

2.   PNG

3.   SVG

4.   TIFF/TIF

5.   WebP

6.   ICO

7.   GIF

8.   BMP

9.   AVIF

10. APNG

  SUMMARY TABLE

JPG/JPEG :

(Joint Photographic Experts Group image)

The JPEG (typically pronounced "jay-peg") image format is currently the most widely. It used lossy compression format. It's particularly useful for photographs; applying lossy compression to content requiring sharpness, like diagrams or charts, it can produce unsatisfactory results.

JPG is actually a data format for compressed photos, rather than a file type. The JFIF (JPEG File Interchange Format) specification describes the format of the files we think of as "JPEG" images.

File Extensions:

.jpg, 

.jpeg, 

.jpe,

.jif, 

.jfif

Browser Compatibility:

All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari

Maximum Dimensions:

65,535×65,535 pixels

 

PNG:

(Portable Network Graphics)

(pronounced as "ping") image format uses lossless compression to provide more efficient compression, and supports higher color depths than GIF, as well as full alpha transparency support.

PNG is widely supported, with all major browsers offering full support for its features. Internet Explorer, which introduced PNG support in versions 4–5, did not fully support it until IE 9, and had many infamous bugs for many of the intervening years, including in the once-omnipresent Internet-Explorer 6.

File Extensions:

.png 

Browser Compatibility:

Maximum Dimensions:

2,147,483,647×2,147,483,647 pixels

 

SVG :

(Scalable Vector Graphics)

 SVG files are ideal for diagrams, icons, and other images which can be accurately drawn at any size. As such, SVG is popular for user interface elements in modern Web design. SVG is an XML-based vector graphics format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth. 

SVG files are text files containing source code that, when interpreted, draws the desired image. For instance, this example defines an drawing area with initial size 100 by 100 units, containing a line drawn diagonally through the box:

Example:

<svg height="100" width="100">

  <circle cx="50" cy="50" r="40" stroke="white" stroke-width="3" fill="#0f9d58" />  

  

</svg>

 

OUTPUT:

 

                                               

 

SVG can be used in web content in two ways:

1. You can directly write the <svg> element within the HTML, containing SVG elements to draw the image.
2. You can display an SVG image anywhere you can use any of the other image types, including with the <img> and <picture> elements, the background-image CSS property, and so forth.

SVG is an ideal choice for images which can be represented using a series of drawing commands, especially if size at which the image will be rendered is unknown or may vary, since SVG will smoothly scale to the desired size. It's not generally useful for strictly bitmap or photographic images, although it is possible to include bitmap images within an SVG.

File Extensions:

.svg 

Browser Compatibility:

Maximum Dimensions:

Unlimited

 

TIFF/TIF :

(Tagged Image file Format)

TIFF/TIF is a raster graphics file format which was created to store scanned photos, although it can be any kind of image. It is a somewhat "heavy" format, in that TIFF files have a tendency to be larger than images in other formats. TIFF files are lossless and so store more image data, resulting in higher quality images.

TIFF supports a variety of color spaces, not just RGB. These include CMYK, YCbCr, and others, making TIFF a good choice for storing images intended for print, film, or television media.

Long ago, some browsers supported TIFF images in web content; Today, however, you need to use special libraries or browser add-ons to do so. As such, TIFF files are not useful within the context of web content, but it's common to provide downloadable TIFF files when distributing photos and other artwork intended for precision editing or printing.

File Extensions:

.tiff

.tif

Browser Compatibility:

No browsers integrate support for TIFF; its value is as a download format

Maximum Dimensions:

4,294,967,295×4,294,967,295 pixels (theoretical)

 

WebP :

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.

WebP now has broad support in the latest versions of major web browsers, although it does not have deep historical support. Provide a fallback in either JPEG or PNG format, such as with the <picture> element.

Google has developed as a replacement for JPEG, PNG, and GIF file formats. WebP yields files that are smaller for the same quality, or of higher quality for the same size. It supports both lossy and lossless compression, as well as animation and alpha transparency.

File Extensions:

.webp 

Browser Compatibility:

Maximum Dimensions:

16,383×16,383 pixels

ICO:

(Microsoft Windows Icon)

ICO (Microsoft Windows icon) file format was designed by Microsoft for desktop icons of Windows systems. However, early versions of Internet Explorer introduced the ability for a web site to provide a ICO file named favicon.ico in a web site's root directory to specify a favicon — an icon to be displayed in the Favorites menu, and other places where an iconic representation of the site would be useful.

An ICO file can contain multiple icons, and begins with a directory listing details about each. icons Following the directory comes the data for the. Each icon's data can be either a BMP image without the file header, or a complete PNG image (including the file header). If you use ICO files, you should use the BMP format, as support for PNG inside ICO files wasn't added until Windows Vista and may not be well supported.

File Extensions:

.ico

Browser Compatibility:

All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari

Maximum Dimensions:

256×256 pixels

 

GIF:

(Graphic Interchange Format)

GIF has been extremely popular for decades, due to its simplicity and compatibility. Its animation support caused a resurgence in its popularity in the social media era, when animated GIFs began to be widely used for short "videos", memes, and other simple animation sequences.

Another popular feature of GIF is support for interlacing, where rows of pixels are stored out of order so that partially-received files can be displayed in lower quality. This is particularly useful when network connections are slow.

GIF is a good choice for simple images and animations, although converting full color images to GIF can result in unsatisfactory dithering. Typically, modern content should use PNG for lossless and indexed still images, and should consider using APNG for lossless animation sequences.

GIF supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided.

File Extensions:

.gif

 Browser Compatibility:

All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari

Maximum Dimensions:

65,536×65,536 pixels

 

BMP:

(Bitmap File)

The BMP (Bitmap image) file type is most prevalent on Windows computers, and is generally used only for special cases in web apps and content.

The simplest, and most commonly used, form of BMP file is an uncompressed raster image, with each pixel occupying 3 bytes representing its red, green, and blue components, and each row padded with 0x00 bytes to a multiple of 4 bytes wide.

While other data representations are defined in the specification, they are not widely used and often completely unimplemented. These features include: support for different bit depths, indexed color, alpha channels, and different pixel orders (by default, BMP is written from bottom-left corner toward the right and top, rather than from the top-left corner toward the right and bottom).

File Extensions:

.bmp

 Browser Compatibility:

All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari

Maximum Dimensions:

Either 32,767×32,767 or 2,147,483,647×2,147,483,647 pixels, depending on the format version

 

AVIF:

AV1 Image File Format (AVIF) is a powerful, open source, royalty-free file format that encodes AV1 bitstreams in the High Efficiency Image File Format (HEIF) container.

AV1 is a coding format that was originally designed for video transmission over Internet. The format benefits from the significant advances in video encoding in recent years, and may potentially benefit from the associated support for hardware rendering. However it also has disadvantages for some cases, as video and image encoding have some different requirements.

The AV1 image format (AVIF) is an exciting new open-sourced and royalty free optimised image format which supports any image codec. An AVIF image offers significant file size reduction compared with JPEG, PNG and WebP and is currently supported on Google Chrome, Firefox and Android.

AVIF does not support progressive rendering, so files must be fully downloaded before they can be displayed. This often has little impact on real-world user experience because AVIF files are much smaller than the equivalent JPEG or PNG files, and hence can be downloaded and displayed much faster. For larger file size the impact can become significant, and you should consider using a format that supports progressive rendering.

File Extensions:

.avif

 Browser Compatibility:

Chrome 85, Opera 71, and Firefox 93.

Maximum Dimensions:

2,147,483,647×2,147,483,647 pixels

 

APNG:

(Animated Portable Network Graphics)

APNG is a file format first introduced by Mozilla which extends the PNG standard to add support for animated images. Conceptually similar to the animated GIF format which has been in use for decades, APNG is more capable in that it supports a variety of color depths, whereas animated GIF supports only 8-bit indexed color.

It uses Lossless Compression.

APNG is ideal for basic animations that do not need to synchronize to other activities or to a sound track, such as progress indicators, activity throbbers, and other animated sequences. For example, APNG is one of the formats supported when creating animated stickers for Apple's iMessage application (and the Messages application on iOS). They're also commonly used for the animated portions of web browsers' user interfaces.

File Extensions:

.apng

 Browser Compatibility:

Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8

Maximum Dimensions:

2,147,483,647×2,147,483,647 pixels

 

Summary Table :

JPEG	GIF	PNG	SVG
It stands for Joint Photographic Experts Group.	It stands for Graphics Interchange Format.	It stands for Portable Network Graphics.	It stands for Scalable Vector Graphics.
It uses lossy compression algorithm.	It uses lossless compression algorithm.	It uses lossless compression algorithm.
Some of the image information is lost on decompression.	No image information is lost on decompression.	No image information is lost on decompression.	Not Lost Information on Larger
It supports 16 million colors.	It supports only 256 colors.		Colors in SVG are specified using CSS color syntax.
Image size is generally less.		Image size is large due to lossless compression algorithm.
It doesn’t support transparency in the images.	It supports single bit transparency in the images.	It supports transparency in the images.
Mostly used in the photography.	It is mostly used in computer generated images and logos.	It is mostly used in image creation.
It doesn’t supports animation.	It supports animation.	It doesn’t supports animation.	It stands for Scalable Vector Graphics.
Less Size than PNG		More size than JPG