The importance of images can easily be estimated by the famous quote that says “An image is worth a thousand words”. The presence of images on a webpage plays an important role in attracting visitors by giving an idea about the contents of the page. It won’t be wrong to say that contents of a page go hand in glove with images to give a clear idea of what it is all about and that is why several image file formats have been introduced with the passage of time.
Image File Formats
When we talk about digital images, we come across a variety of image types in our daily routine such as the well-known BMP, PNG, GIF, JPG, SVG, TIFF, WebP, and several others. The use of a particular image type in web pages can have an impact on page performance such as loading time which is considered one of the important factors in a page’s ranking.
The prime competitors for usage over the web include PNG, GIF, SVG, and JPG that are out there for decades now. A recent survey by web technologies shows that the lion’s share of web usage is held by PNG and JPEG image file formats.
Let’s have a look at some of the most popular image formats, their applications, and usages worldwide.
GIF
GIF (Graphical Interchange Format) was introduced in 1987 and uses lossless compression to retain the image quality. GIF typically allows up to 8 bits per pixel and up to 256 colours are allowed across the image. GIFs also support animation which is the only unique characteristic that makes it different from other image file formats. An animated GIF combines numerous images or frames into a single file and displays them in a sequence to generate an animated clip or a short video. The colour limitations are up to 256 for each frame and are likely to be the least suitable for reproducing other images and photographs with colour gradients.
PNG
PNG (Portable Network Graphics) is a widely used image file format that was created in 1995 to replace GIF. PNG uses lossless compression and does not support animations. It is supported on almost all operating systems by now. PNG gives you flexibility in working with complex images and supports up to 16 million colors which is one of the reasons behind its somewhat large comparative file size. Some advantages that make PNG superior to GIF include:
JPG/JPEG
JPEG (Joint Photographic Expert Group) was introduced to reduce the image file size by using lossy compression techniques. The output image, as a result of compression, is a trade-off between storage size and image quality. JPG is the obvious choice where storage is the main concern and speed is required over slow networks. Users can adjust the compression level to achieve the desired quality vs file size. JPG, however, doesn’t support transparency and animation, and can’t be used over the web where any such features are required. The format has been the choice of storing and transmitting photographic images on the web. Fileformat.com shares the details of JPEG file format specifications.
SVG
SVG (Scalable Vector Graphics) files use XML-based text format for describing the appearance of an image. It is one of the most used formats for building websites and print graphics in order to achieve scalability. SVG achieves scalability from the mathematically declared shapes and curves that it uses for drawing images. And that is why SVG is independent of resolution as well.
SVG file size is large as compared to GIF and PNG as it lies in the category of lossless image compression file formats. SVG files can be viewed/opened in almost all modern browsers including Chrome, Internet Explorer, Firefox, and Safari. A brief description of SVG file format can be found as detailed by fileformat.com.
WebP
The WebP image is a modern raster web image file format that is based on lossless and lossy compression. The format focuses on keeping the image quality while reducing the image size for a faster web experience. WebP is comparatively new and it will take some time for this file format to be commonly used over the web. As per Google, WebP lossless images are 26% smaller in size compared to PNGs, while WebP lossy images are 25-34% smaller than comparable JPEG images.
WebP is a comparatively new file format and is supported on Chrome and Opera browsers. It will take some time for this new file format to be commonly used across the web.
Usage on Web
As mentioned earlier, the use of image types on the web is subject to the requirements. If the page needs representation of contents in animated form, GIF should be used. JPEG is the obvious choice if file size restrictions are kept in consideration. PNG helps when more detailed and quality images are required. SVGs are scalable and can be used if the file size isn’t a concern.
The latest file format introduced by Google, WebP, is the obvious choice of use over the web once it is commonly used. An important factor considered, while using selected image file format on the web, is file size which affects website loading time and plays an important role to improve SEO.