What is the difference between JPG, JPEG, GIF, PNG and SVG image formats?

On the Internet every day millions of millions of data are transmitted in the form of digital images. JPG, JPEG, GIF, PNG or SVG are the most used image formats on the Internet today. In this article, we will learn about popular image formats, know the differences between image formats and which ones to use.

The following infographic will help us better understand the above formats. From the origin of the format, pronunciation and the method of compressing their data, thereby helping us better understand the nature of each format for each job, suitable purpose. Let's find out what file format is best for you!

JPG or JPEG (Joint Photographic Experts Group) image format

JPG (original name is JPEG - stands for 4 from Joint Photographic Experts Group). There is no difference between JPG and JPEG except for one with 3 characters, 1 with 4 characters. Initially when this format was created by Joint Photographic Experts Group, it was shortened to JPEG, but because MS DOS could only handle or read files with a 3-character extension, JPEG was shortened to JPG. . Today, JPEG is used to provide a more complete abbreviation for the term Joint Photographic Experts Group. From here, in the article will use JPEG.

JPEG is a 16-bit image format that can combine red, blue, and green light to display millions of colors. This makes JPEG "friendly" with images and is the standard format for most digital cameras today.

JPEG allows flexible image compression from 0% (maximum compression) to 100% (uncompressed). Normally, installing JPEG image compression will be left at 60-75% to significantly reduce the image file size but the image still looks good on most screens.

JPEG is a compression type that causes loss of data (lossy), so it cannot be used for continuous image editing. Exporting images to JPEG will reduce the quality and if continuous import and export will make image quality worse. This is why professional photographers often shoot in RAW format so they don't lose quality.

JPEG cannot preserve image transparency.

JPEG is often used for:

1. Static image
2. Photography
3. Photos with complex colors

GIF image format (Graphic Interchange Format)

GIF is an 8bit color file, which is limited to a palette of up to 256 colors. Basically, each GIF contains a pre-installed "crayon box" and there's no way to really combine those colors into new colors.

The number of 256 colors sounds a lot, but complex photos often have thousands of tones. This color strip was lost during the conversion to a GIF image and this is the main reason why GIF is not used for color photos.

Although it is not a good choice for color images, the 256-color limit can help image files to be smaller in size, ideal for slow Internet speed situations. GIF is a format that maintains image transparency throughout many years, although PNG and SVG also provide this option.

In addition to support for transparent images, GIF also supports animations, limiting every frame in the previously selected 256 colors. GIF is a compression format that does not lose data, so it is used to keep straight lines on typography and geometric shapes, whether these objects fit vector graphics files like SVG, or AI format of Adobe Illustrator.

GIF is not ideal for modern photography as well as image storage. When in a small size, GIF images may have a smaller capacity than JPEG images because the color palette is very limited, but in normal image sizes, JPEG compression will produce an image with a smaller capacity. GIF images are now quite outdated, often used to create funny animations or raw transparent images only.

GIF images are used for:

1. Simple animation
2. Small icon
3. Graphics with low pixel-to-pixel variations (flat colors like logos and flags).

PNG (Portable Network Graphics) image format

A newer image format GIF and JPEG are PNG. PNG is considered as a "marriage" of GIF and JPEG thanks to the best features from these two image formats. PNG uses LZW compression algorithm without losing image quality, transparent support so it is an excellent format for Internet graphics.

PNG supports 8bit color like GIF, but also supports 24bit RGB color like JPEG. PNG is a lossless compression, which does not reduce image quality. PNG file capacity is often larger than JPEG, GIF and is not supported by some browsers (usually an ancient browser).

1. PNG-8: Similar to GIF and uses the same 256-color palette, it supports better transparency options, and often exports files with smaller capacity, but the PNG-8 does not have animation functionality.
2. PNG-24: Enables displaying images with millions of colors - just like JPEG - but provides added transparency. This is also the largest image format, if the image quality is more important than the image file size, the PNG-24 is the best choice for you. If you still care about file size, you can try TinyPNG.com to compress it.

Compared to JPEG, PNG-24 is not compatible with all applications and platforms, so it is not the ideal format when sharing on the web. However, if you need to edit photos multiple times, but don't want to reduce the image quality, that's exactly what PNG can do.

PNG is used for:

1. Web graphics require transparency
2. Pictures or graphics are multicolored with high complexity
3. Photos need to be edited, exported many times

Infographic summary of JPEG, PNG and GIF

What is the difference between JPG, JPEG, GIF, PNG and SVG image formats? Picture 1

SVG (Scalable Vector Graphics) format

Unlike the 3 formats mentioned above, SVG is not a pure bitmap format. It is a vector format - close relatives to EPS (files can contain text, graphic images, are becoming attractive options for web designers and UI) and the AI ​​format of Adobe Illustrator. You can imagine SVG as "HTML for Illustrator" and need to think about SVG other than other image formats.

SVG is best suited to display logos, icons, maps, flags, charts and other graphics created in vector graphics applications like Illustrator, Sketch and Inkscape. Written in XML-based markup, SVG files can be edited in any text editor, editable with JavaScript or CSS. Because vectors can be scaled to any size while maintaining sharp image quality, they are ideal for responsive design.

You can embed bitmap graphics into SVG files like embedding JPEG images into HTML, by linking to the image source via URL or packing images as Data URI. This feature makes SVG more flexible and powerful than other image formats.

SVG is used for:

1. Logo, icon with strong design, geometric design, vector
2. Graphics need to be displayed in different sizes and screens
3. Graphics compatible with many devices
4. Graphics need to be edited, updated and re-deployed

Please refer to more:

1. TOP 04 the best free GIF animation tool available today
2. Optimize jpeg and jpg image files
3. Make sharp photos in 2 ways in Photoshop

Having fun!