What is Best Image Format For Web? Which one to choose?
Average mobile webpage is 2.2MB and 68% of it is images. So image has huge importance for web page speed. Well image’s format has any effect on that. First lets see what kinds of image formats are widely used on web.
JPG/ JPEG (Joint Photographic Experts Group)
JPEG is perhaps the most common image format used on the web. It is standard was created in 1992 (latest version, 1994) as the result of a process that started in 1986. Though, this standard is generally considered as a single specification, in reality it is composed of four separate parts and an amalgam of coding modes.*
JPEG is lossy format so it always has some loss of quality when using this format. But it is most compatible format for web. Nearly all of the browsers are supporting JPEG format.
GIF (Graphics Interchange Format)
GIF is a bitmapimage format that was developed by a team at the online services provider CompuServe led by American computer scientist Steve Wilhite on June 15, 1987.
GIFs are suitable for sharp-edged line art (such as logos) with a limited number of colors and can be used for animations and low-resolution videos.
PNG (Portable Network Graphics)
PNG is mostly known for it’s transparency feature. Besides RGB (Red-Green-Blue) channels PNG has alpha channel for transparency. PNG also supports lossless compression.
PNG supports palette-based images, grayscale images (with or without alpha channel for transparency), and full-color non-palette-based RGB/RGBA images (with or without alpha channel).
WebP
WebP is a method of lossy and lossless compression that can be used on a large variety of photographic, translucent and graphical images found on the web. The degree of lossy compression is adjustable so a user can choose the trade-off between file size and image quality.
WebP is an image format developed by Google. This format was designed to be used specifically on the web. Even though WebP has huge advantage for size of image, some of the browsers does not support WebP.
Which one to choose?
When it comes to choose best option for your websites there is two important points to consider. Size and Compatibility.
Size
Size varies according to image. Picture may have smaller size with WebP and logo/graphics have smaller size with PNG.
Compatibility
JPEG, GIF and PNG are supported by many common browsers. But even though WebP has size advantage, it is not supported by some browser.
image4io Auto Format Delivery
image4io has the ability to automatically detect which browser is requesting the image and then select the most efficient image format to deliver. image4io auto format delivery consider both compatibility and size to deliver best option for your customers.
With this feature image4io users doesn’t have to decide which image format to use on development time. Web developers can work without thinking about their source image formats and which format to deliver their customers. image4io decide and deliver best option from any source format to best format via multi-CDN architecture.
Sources:
Originally published at https://image4.io on June 5, 2019.
