Differences Between Image Formats and Usage Purposes
Differences between the speed at which a website is loaded are the visuals on the site that increase HTTP requests the most. Sometimes we express a matter that can be explained in tens of words, more effectively with a single visual. For a richer experience, as well as the use of images, the format of these images used is as important as the content to the performance of a website and the quality of the images. In this article, we will talk about the different visual formats that can be used on web sites, their advantages and the correct usage purposes.
There are several common visual formats on the web: PNG, JPG, GIF, and SVG. In addition, various work is being carried out on new visual formats, especially by Google. Most of us prefer to use the image we will add to a website as PNG or JPG. So, did you think for what purpose these different formats were actually created?
The fact that the images used in the websites are not in the proper format deprives us of many advantages in terms of compressing and optimizing the images, although there is not much loss of quality. For example; saving a photo as PNG instead of JPG can result in a much larger file load. Therefore, knowing the differences between the visual formats, the pros and cons, and what kind of files are used, where and how, can be of great benefit to the decisions we make during the development and design process. Now, let's briefly talk about the correct usage of types, their features and new visual formats that are frequently used in web sites.
JPG (Joint Photographic Experts Group)
JPG is the most commonly used visual format on websites. Provides high-quality images at low dimensions. When JPG format images are compressed, they can be reduced in size with very little quality loss of 60-70%. JPG is a form of loss of quality, especially in edges and color transitions, proportional to the height of the compression algorithm used. The most important point about JPG files; compression is not applied, the original condition must be kept. Because when you edit the compressed file and re-compress it, the image becomes much more distorted.
JPG images provide the most accurate results for photos. They can also be used for printing. Background cannot be used transparently. The file size is smaller than other file formats. Although there are small losses in quality in visual details, still is a good format to keep going.
PNG (Portable Network Graphics)
The most commonly used visual format after JPG is PNG. PNG is an image format developed by W3C as an alternative to GIF, with two different types, 8 and 24-bit. Supports transparency. It delivers successful results on all images at different levels of transparency. Compressing images in PNG format does not cause loss of quality. The file size is 3-4 times higher than JPG. The PNG format produces more successful images on computer screens and sharp-edged, vector- and text-containing images.
GIF (Graphics Interchange Format)
A digital image storage format. Supports up to 8-bit (256 colors). Transparency is not as much as the PNG feature. Background can be used as transparent. The main advantage of GIF is that it provides pixel-based animation production. The image quality of photos recorded in the GIF format is very low because it does not support more than 256 colors. File sizes are too small. Icons are ideal for low color graphics and solid colors. It is not a suitable format for photographs.
Visual formats of the future and WebP
When we consider the diversity of devices and the change in display technologies due to the rapid development in the web world, the search for new technologies continues. You've come across trials of many new visual formats. The most well-known of these is WebP, which Google continues as an open source project. As an alternative to PNG and JPG formats, WebP is a visual format designed for web use only, providing a compression ratio of 20-40% and without degradation of visual quality. It aims to combine the advantages of PNG and JPG formats without loss of file load and quality. It is also expected to support animation as an alternative to GIF. It is not currently supported by all browsers and is still under development.
Why is it important to know the differences?
Visual use is an indispensable element for the user experience in today’s online world. However, access problems, loading problems, and file size problems, as well as the technology used and changes in screen resolution may be insufficient. In parallel with the developments in technology, these problems are tried to be solved with new file types.
For a website, the most important problem faced by visual use is divided into two headings: Providing quality views and optimizing file sizes. However, the purpose of creating and using each visual format is based on these two points. Therefore, knowing the purpose of the images used in the formation process of a web site will make it much easier to solve such problems in our work.