Knowing which file type to use for images on and off the web is an essential part of developing and maintaining good design practices. Although most formats will appear fine on the web, understanding the basic strengths and weaknesses of these image formats will boost your confidence in being able to decide what is best in every situation. Let’s explore four of the most common image formats and see how much you know
JPEG is a commonly used method of lossy compression for digital images, particularly for those images produced by digital photography. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality.
The JPG file format, short for Joint Photographic Experts Group, is a type of image compression that works best with photographs and complex images. JPGs use a compression method that removes non-human-visibile colors from images to decrease file sizes. Be careful, though. If you decrease the quality of a JPG too much, you will begin to lose important color information that cannot be recovered.
The JPG file format also allows you to save progressive JPGs, which will load in stages. You may have experienced this before when visiting a website and watching as an image slowly loses its blurriness and becomes clearer.
Use JPGs for product photos, human portaits and other images where color variances are important. Do not use JPGs if you need transparency, which is the ability to see through an image and decipher the background behind it. JPGs do not support transparency.
GIF is is a file extension for an often animated raster graphics file and is the second most common image format used on the World Wide Web after JPEG.
A GIF, or a Graphics Interchange Format, reduces the number of colors in an image to 256, from potentially thousands of colors coming from a digital camera. GIFs also support transparency.
GIFs have the unique ability to display a sequence of images, similar to videos, called an animated GIF, which is a series of separate GIF images that are linked together to automatically create motion, or animation.
GIFs, like JPGs, also have the ability to load in segments on web pages. These images, known as interlaced GIFs, tend to be slightly larger than regular GIFs, but they allow a GIF image to be partially visible as it is loading on a web page.
GIFs can be used effectively for limited-color images, such as logos and graphs, or for images where transparency is important. Do not use GIFs for full-color product photos and staff portraits, for example, where color variances are important, as GIF colors are limited to 256.
Although the GIF format is still in use, it should generally be avoided in favor of the PNG format, which does nearly everything better.
PNG is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF), and is the most widely used lossless image compression format on the Internet.
PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors), grayscale images (with or without alpha channel for transparency), and full-color non-palette-based RGB/RGBA images (with or without alpha channel). PNG was designed for transferring images on the Internet, not for professional-quality print graphics, and therefore does not support non-RGB color spaces such as CMYK. A PNG file contains a single image in an extensible structure of “chunks”, encoding the basic pixels and other information such as textual comments and integrity checks documented in RFC 2083.
The latest of all the file types, SVG (Scalable Vector Graphics) is a vector image file format released in 2001, and is more powerful than other file formats suitable for the web. Unlike raster formats seen in JPG, GIF, and PNG, an SVG image remains crisp and clear at any resolution or size.
Scalable Vector Graphics (SVG) also deserve a mention. SVGs are a web standard based on XML that describe both static images and animations in two dimensions. The standard has actually been around for more than a decade, but with the recent emergence of HTML5 it is finally coming of age. For now, know that SVG allows you to create very high-quality graphics and animations that do not lose detail as their size increases. This means that with SVG you could create one graphic that looked great on a tiny mobile phone screen or on a 60-inch computer monitor.
So, which should you use?
If you’re uploading vacation pictures to Facebook, JPG is the winner. You want to make a short, hilarious animation from your favourite movie scene? GIF. If you’re going to be using high quality images, detailed icons or need to preserve transparency, PNG is the winner. SVG is ideal for high quality images and can be scaled to ANY size.
Do you have any business ideas to built? We are ready to help! 41studio is a website design and development company with expertise in Ruby on Rails, delivered 200+ products worldwide. Tell your idea to us and we will gladly help.