Which image format should we use? Difference between JPEG, PNG, GIF,TIFF?
Image File Formats
An image has many formats, most of which are JPEG, PNG, and GIF used in web pages. All image formats have their own advantages and disadvantages, besides some formats are also made for any particular work. You must be aware of which work format you should use and what format to avoid so that you can get optimum result.
So let us know about some of the image formats of computer graphics, what are the flaws in them and what place they should be used.
JPEG’s full form is the Joint Photographic Expert Group, it is the most used image format. It uses lossy compression i.e. when you save an image in jpeg format, it eliminates some image information from which the size of the image is reduced.
- JPEG consists of 24 bit color per pixel and supports 16 million colors.
- Compressing the image reduces the file size.
- For photography, most of the same format is used and it is used in almost all digital cameras.
When to use JPEG?
Digital Photographs – For mobile, computer devices, to upload online.
For printing – This format is useful if you want to print the photo in high resolution.
When to use JPEG?
If you want a transparent image, JPEG is not correct for this. You can not create a transparent image in this format.
Do not use JPEG for the image which contains text, sharp edge shapes because text, color, and edges can be blur due to the compression.
Animated file should be used if you can not use JPEG.
GIF’s full form is Graphics Interchange Format. It is used for web image and mostly animated graphics. It has only 256 colors. File size is greatly reduced due to being less color.
- GIF uses 8-bit format and supports only 256 colors.
- GIF is lossless so it can be easily customized.
When to use GIF Image?
- For simple images that do not have much color, GIF can be used.
- Very useful for web animation, buttons, social media meme etc.
- You can use it for transparent background.
When do not use GIF?
- This is not suitable for high-quality photographs.
- Do not use GIF to make Gradient image design, because of its color limitation, the image will blur.
- Can not use it in print design.
- The complete form of PNG is Portable Network Graphics. You can also understand it as the improved version of GIF. It is designed by keeping the web in mind. It is similar to the GIF but the PNG image can have 16 million colors.
- PNG was created to replace the GIF.
- The size of the PNG file is much lower than that of GIF.
- PNG can use 24-bit colors.
- You can also create a fully transparent or alpha transparent image.
When should PNG be used?
- PNG is very good for high-quality web graphics design.
- PNG format is suitable for smooth transparent design and for drop shadow effect like alpha transparent.
- For small size image.
When should not PNG be used?
- It should not be used for photographs.
- Can not make the animated graphic from PNG like GIF.
- If you are designing for printing, it is better that you should use JPEG because the image of PNG format is only suitable for the screen.
TIFF’s full form is Tagged Image File Format. In this format, image quality is very high, so it is used in desktop publishing and professional photography.
- TIFF image can be both lossy or lossless.
- It has more use for work like scanning and printing.
- Like JPEG, GIF can also be compressed in the image.
When will TIFF format be used?
- Use TIFF If you are going to print high-quality graphics, if the image of large size is to be printed then it is the best format for that.
- If a scanned document does not want to reduce the quality of photos, then scan in TIFF format.
When should TIFF format not be used?
- Web graphics should not be used for it, it is better to print.
- Do not use it for a high-quality online image, this format’s file size is very large, that takes more space and time to load.
Hope you enjoy this information on image formats. If you have any questions or want to give suggestions, please tell us by commenting below.
Also, read an article on Responsive Web Design at https://www.techfogg.com/web-development/responsive-web-design