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 the visitors by giving an idea about the contents of the page. It won’t be wrong to say that contents of a page goes 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 impact on page performance such as loading time which is considered one of the important factor in page’s ranking.
The prime competitors for usage over web include PNG, GIF, SVG, and JPG that are out there for decades now. A recent survey by web technologies shows that the lion 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 usage worldwide.
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 support animation as well which is its 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 gradient.
PNG (Portable Network Graphics) is 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 upto 16 million colors which is one of the reason behind its somewhat large comparative file size. Some advantages that make PNG superior to GIF include:
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 (Scalable Vector Graphics) files use XML based text format for describing the appearance of an image. It is one of the mostly used format for building website 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. Brief description of SVG file format can be found as detailed by fileformat.com.
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 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 comparatively new file format and is supported on Chrome and Opera browser. 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 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 is kept in consideration. PNG helps when more detailed and quality images are required. SVGs are scalable and can be used if 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 web, is file size which affects website loading time and plays an important role to improve SEO.