Image data is stored in different graphical formats with their own characteristics. Graphic file formats play a major role in determining how big a file will be. They also determine how you can edit the files later. Graphic file formats are designed for optimal organization and preservation of graphic data in a file. Knowing the peculiarities of different graphic file formats will help you store images efficiently and transfer them between software environments. So, let's get to it.
Graphic file format
Graphic file format is a way of organizing image information into a file. It determines how the information in the file will be stored: for example, raster or vector, two-dimensional or three-dimensional.
Three-dimensional graphics are widely used in engineering programming, modeling, computer games, and cinematography. Raster graphics are useful for creating high-quality photorealistic images, detailed digital drawings, and photos. Most of the graphic editors for working with raster illustrations are focused not so much on creating images, as on processing them. They are often used by photographers and retouchers and other specialists. Graphic editors for vector graphics are intended primarily for creating illustrations and, to a lesser extent, for processing them. Vector graphics are used to create icons, logos, not detailed illustrations, and are often used in web design.
Graphic file formats can be processed by most graphical editors (JPG, WebP, PNG, GIF), or program-specific editors, which provide the best ratio of image quality to file size but are recognized only by the applications that can create them (PSD, AI). Let's learn more about popular graphic file formats.
Common formats
You have probably already encountered some of the most common graphic file formats. These are:
- JPEG, a raster file format, doesn't support transparency. It is most commonly used to process and store photos. It is recognized by all browsers and devices.
- WebP, a raster file format. It was developed by Google to reduce image file size to make web pages load faster. It was created to replace JPEG as the main photo format on the Internet. Its peculiarity is an advanced compression algorithm that allows you to reduce the size of the picture without any apparent loss of quality. WebP supports transparency.
- PNG, a raster file format. It allows to compress files with little or no loss of quality and supports transparency. It is mainly used to store graphic elements with transparency.
- GIF, a raster file format. It provides compression without loss of quality, supports animation and transparency.
- TIFF, a raster file format. It is most commonly used in the typography and printing industry. An image in TIFF will not lose its quality after each saving of the file. But, unfortunately, this is the reason why TIFF files weigh a lot more than JPEG. Although, along with lossless compression, TIFF supports JPEG compression.
- SVG, a vector file format. It supports transparency and allows you to save both still and animated images. It allows to scale files without changing their quality. Usually it is used to create logos, icons, etc.
Lossy and lossless
Almost all web graphics are compressed to efficiently transfer images over the Internet. Image compression is an idea used to reduce the size of images, especially when you want to improve your website's loading speed and performance. There are two basic types of image compression: lossy and lossless.
Lossless image compression reduces the size of the file containing an image without losing its quality at all. It just gets rid of the data that isn't needed or that can be dropped and restored. A good example of a lossless compressed file is PNG.
In contrast to lossless, lossy image compression restores the large file to its original form with loss of some data which can be considered as not-noticable. An example of a format that works with this approach is JPEG.
To make the explanation even clearer, here are the three pictures for you. The first picture shows an original image, while the second and the third ones demonstrate the two types of compression.
There is no right or wrong choice regarding the best type of compression. It depends on the trade-off between the available size and how clear an image should be. For example, you are developing a faster website that doesn't require storing high-quality photos. In this case, you could go with lossy images to optimize the site. However, if you're working on a site that provides high-quality images, e.g. photos of people, or sells some products, then lossless compression can be the best choice for you.
Conclusion
In this topic, you've learned more about image files and types of image compression: lossless and lossy. Lossless compression does not significantly reduce the size of an image but preserves its quality. Lossy compression, on the other hand, can significantly reduce image size at the expense of its quality. Their names speak for themselves! Let's put the new knowledge into practice then.