One can’t deny the absolute importance of graphics and images in the web or mobile design. A well-designed website or application is a complete package containing text, graphic, audio and video. More or less, images are the crucial design asset for almost every website design. However, it might be tricky to get most out of the images considering the various other aspects of your website design such as its performance and Image Formats.
In this article, we shall study some of the popularly used image formats that can effectively be used in the modern design process.
JPEG
It stands for Joint Photographic Expert Group and is one of the highly preferred image formats. They are also known with multiple extensions such as JFIF, JPG and JPE. However, JPG is commonly used on all platforms. JPEG is also used for storing and transmitting photographs on the World Wide Web, but not a good choice for drawing lines and other textual or iconic graphic. This is because its compression method performs badly on these types of images.
Few Distinctive Properties of JPEG format:-
- JPEG is very well suited for photographs and paintings of realistic scenes having smooth variations of tone and color
- In JPEG, the downsampling can be done in different ratios such as 4:4:4 (no downsampling), 4:2:2 (cut off by factor of 2 in horizontal direction), and most commonly 4:2:0 (cut off by factor of 2 in horizontal and vertical directions)
- The compression ratio can be modified according to the needs through multiple division factors used in the quantization phase
- JPEG compression can be applied to the photographs having detailed non-uniform textures that allow higher compression ratios
GIF
Graphics Interchange Format(GIF) is another useful image format that allows 8 bits per pixel, three each of the red and green, and two for the blue. This ensures availability of 256 colors for GIFs. However, it is also possible to get more colors into the image through multiple color blocks among 256-color palettes. Through lossless compression, GIF format is capable of reproducing limited color palettes perfectly over multiple re-compressions.
There are two advantages of using GIF’s over JPEGs.
- GIF can use transparency. In a GIF pixels are either 100% transparent or 100% opaque
- GIF is also a multi-image format, so you can use it for animation as well
PNG
Portable Network Graphics(PNG) was created to improve upon the GIF format. It makes use of DEFLATE compression technique which is the same algorithm used in zip. PNG is a lossless compression and as a result, this format produces images of larger size than JPEG in case of photographic images. However, when used for line art type images, PNG results in small size images than JPEG and almost always smaller sizes than GIF.
Using JPEG, GIF and PNG
A simple principle that follows in all these formats is that you have to either compromise with quality or file size of image and vice versa. Having explored these image formats, here is a quick conclusion on what image format you should employ in your design.
- JPG is best for photographed image
- For applications like logos or images with blocks of flat colour and no gradients, GIF or PNG8 should be used
- Images using motion effects such as drop shadows or glows require transparency, in those cases, choose PNG24
