PNG, JPG, TIFF, GIF and SVG format When to use them?
Hi how about guys!
Looking to share content of practical use, today we want to talk about the different types of image formats, because although they are something that many of us are familiar with, sometimes we do not make the right decisions when choosing to export a project or even when using them in different situations such as in a presentation or in a printed poster, since we do not know what the format really implies.
"There
There are many types of image files available, which we could group into bitmap or vector; and those whose compression mode is lossy or lossless.However, of which we will find more examples will be in format: JPG, PNG and GIF, because they are very commonly used, but there are also more specialized SVG and TIFF.
Most browsers on the Internet, computers and mobile devices, have the ability to display these types of images without any problem, but definitely, some formats work better on certain occasions. Here we will talk a little about each one as well as its advantages and disadvantages.
JPEG format
JPG is a type of file developed by the Joint Photographic Experts Group (hence the acronym JPEG) to be the standard for images made by photographers. To reduce the size of the JPG, the file compresses the image data into blocks of pixels (bitmap). The problem with this understanding is that it is permanent, because it was created with the idea of saving large images in small storage spaces.
Advantages
- It can be compressed up to 100 times.
- It is ideal for displaying photos on the web without taking up much space on a server
- Maintains good quality and has a wide range of colors
Disadvantages
- They are a format with compression and does not allow transparencies
- Generates Pixelation even setting it with the highest quality
- Not suitable for illustrations, drawings, or text
PNG format
PNG stands for Portable Network Graphics. This format was developed largely to solve the shortcomings of the GIF format and allows you to store images with a greater depth of contrast. This also supports transparency, and even semi-transparency, so it is very good for use on the Internet and in browsers.
Advantages
- It is a lossless type of image, so it reproduces the original data
- Supports transparencies (and semi-transparencies) without color loss, as its color gamut can be 8-bit (as GIF) or 24-bit (as JPG)
- It is ideal for use in website development for logos, buttons, and other images that need to retain a good resolution.
Disadvantages
- Images with many elements and colors, can weigh much more than their equivalent in jpg
- It doesn't support CMYK mode, so it's not entirely useful for printing
- Some browsers (especially older ones) have problems with viewing these types of files
GIF format
GIF is a type of image file with quite a bit of life, although it was almost forgotten for a while when it was overtaken by other types of images. Today it has become very popular again thanks to its animated features. Its acronym stands for Graphics Interchange Format and was created by CompuServe.
Advantages
- It has a color palette of 256 colors and allows transparencies
- Straight lines (such as texts) do not lose definition
- Allows animations in a not very heavy file and without the need for additional software to be played (unlike videos)
- Many programs (such as PowerPoint) or applications (such as Facebook and Whatsapp) accept the format while retaining its properties.
- Being a medium between image and video, it is ideal for the generation of banners and advertising
Disadvantages
- Despite being a type of lossless image, its color range is reduced so it can generate pixelation
- Since 2012, there has been a rapid boom in the format, so that websites that present advertising through gifs have been over-saturated, in some cases.
TIFF format
The . TIFF (Tagged Image File Format) was developed by the defunct Aldus and Microsoft, and is currently owned by Adobe Systems, is the favorite when it comes to storing or using images in high resolution and great quality, whether in the design or advertising industry.
Advantages
- Compatible with design programs
- Handles multiple images and metadata in a single file
- Bitmap image type, but with non-destructive compression
Disadvantages
- A single image can weigh hundreds of megabytes
- Beyond professional use, it is impractical to keep images in this format
- The image viewers of some computers and mobiles, may have problems when processing this type of image
SVG format
A lesser-known format is SVG (Scalable Vector Graphics), developed from vector graphics (as opposed to images developed by bitmap). It is a standard format in web design, as it works in XML describing both static and animated images. Although of course, the arrival of the HTML5 language has made it gradually die.
Advantages
- Like any vector image, its main advantage was to be fully scalable without any loss of quality.
- It weighs little, so it allows for greater definition than bitmap files
- It is an open XML-based format and works seamlessly in all browsers.
- It is ideal for using fonts and icons on the web because of its scalable properties
- They support CSS styles, so if we change the style on our website, it will also change within the SVG file (including actions such as rollover, color changes and even animations)
Disadvantages
- It is a great unknown, so generating and finding images in this format is complicated
- For editing, it is necessary to have knowledge in programs such as Adobe Illustrator or Corel Draw
- It is not ideal to have photorealistic images, but illustrations or diagrams.
This is just an overview of the most common file types, as you could say a lot about each, plus there are countless other file types.
Did you know these differences? Do you know other uses for each?
Don't forget to leave your comments.
Best regards!
