Understanding Image Formats of The Web
UNDERSTANDING WEB IMAGE FORMATS
Web File Formats
Image is one of the most crucial elements that bring life and existence to still web documents. Identifying web-friendly file formats for images and understanding how to apply the right one still requires planning and preparation.
The purpose of this article is to point out how to use and implement correctly the three browser-friendly image files formats: .jpg, .gif and .png. The acid test is to examine which of these formats perform a specific task in every file published on the web.
Below are the few terms related to image file formats you need to know.
Image Format Key Terms
There are two types of compression methods used for web graphics: lossy and lossless.
The lossy compression requires data to be removed permanently from the image to compress the file and make it smaller. Typically, areas with small details are lost as the level of lossy compression is increased.
The lossless compression is the opposite of lossy compression, in its case, data is not lost when the file is compressed. Implying the actual data remain the same and maintain the same looks whether it’s compressed or uncompressed.
But it is important to note that, while lossless compression does not result in a loss data, the file can change in appearance if colors are removed during compression.
RGB and CMYK color mode
All images found on the web are displayed in the standard screen-based RGB color mode (Red Green Blue). But when this image is compressed, the image file becomes smaller and some of the colors are removed in the processed. This is one of the reasons why some web file formats have smaller, more restricted color and others are capable of handling millions of color, and instead shrink the file size.
The mode to view an image and able to see through part of it, such an image exhibit transparent characteristics and is called transparency.
When a web graphic contains transparency, the web page’s background color or background images show through in the transparent areas.
But note that, file types that support transparency fall into two categories: binary and variable.
Binary transparency file types are any given pixel that is either transparent or opaque.
Variable transparency is otherwise known as an alpha channel, this channel allows pixels to be partially transparent or opaque, capable of creating subtle gradation.
file format - jpg, jpeg
JPG popularly pronounced “jay-peg” stands for Joint Photographic Experts Group. The format uses either .jpeg or .jpg file extension.
This file format is intended for photographs and images alike that incorporate lots of colors, tiny bits of colors (usually in smaller individual pixels), realistic 3-D shading, shadows.
What JPG Supports
- Supports true color imaging up to 16.8 million colors
- Allows interlacing
- Best for the vast majority of photographic web images.
What JPG Doesn’t Support
- It does not support transparency or animation, or cross-browser-supporting interlacing. GIF is the best candidate for this.
- It’s lossy
- Blurs crisp edges between adjacent colors
- Add noises to areas of solid colors
- Alters the colors of the original image file
- It does not contain an exact set of colors but is capable of displaying as many colors as possible.
- 24-bit color modes
What to Watch Out For
- Never save over an original image when lossy compression is in effect, or the original high-quality of the image will be lost and be irretrievable. Instead, maintain the original status as an unaltered master copy preferably in some format other than JPG.
- All web JPEG files must be in the RGB color state, as opposed to the print standard of CMYK (cyan, magenta, yellow, black)
GIF IMAGE FORMAT
GIF - Graphics Interchange Format
GIF (Graphics Interchange Format) was designed for online use in the 80s, it uses a compression method that is well suited to certain types of web graphics. It does however not support more than 256 colors even when its data is kept unchanged if compressed.
What GIF Supports?
- Work best for line-based images with areas of solid color, such as cartoons, diagrams, line art, and graphic text and flat-color graphics.
- Supports index transparency, interlacing, and animation.
- Supports no anti-aliasing and no dithering
What GIF Does Not Support?
- It does not support more than 256 colors. Instead of this, chose a non-safe adaptive palette (colors chosen from within the image) to preserve the color choice accurately.
- GIF compression was designed for storing images composed of large areas of flat color in limited color depth.
- Color modes are 8-bit and restricted to or not more than 256 exact colors.
- Lossless compression
- Supports animation
- Supports transparency (only in Binary)
What to Watch Out For
- Never store photos in the GIF format as it often results in very large files, even so, you sometimes need to export a photo to GIF because you require transparency or animation
Portable Network Graphics
.PNG IMAGE FORMAT
PNG (Portable Network Graphics) is a fresher graphics format intended to replace GIFs for just about everything it represents. except for the animation. It can save files with alpha transparency, a feature that is absent in both GIFs and JPEGs. This format can stack layers of an image by fading one image over another or place the irregularly shaped image on top of a multicolored background seamlessly.
What It Supports?
- It supports gamma correction – a nonlinear operation used to encode and decode luminance in still images.
- It supports grayscale, 8-bit, 24-bit and 32-bit and true color modes.
- Support alpha channel transparency, which offers greater creative freedom than index transparency.
What It Does Not Support
- It does not support animation
- True colors, which offers 16.8 million colors
- Lossless compression
- Two-dimensional interlacing, an improved method of displaying images at a progressively higher level of detail
- Consistent color display on a computer screen.
PNG File Compression
To compress a PNG file or export a file in png format, an optimized panel should be the best option as shown if you use Adobe Illustrator. To minimize compressed PNG file sizes, be sure to do the following:
- Choose the lowest possible color setting that provides the required image quality such as grayscale, 8-bit(256 colors), or true-color (more colors than the single image has) when exporting a PNG file
- Use alpha transparency only when necessary as this increases the file size. You may rather export with index transparency if you need only two levels of transparency: fully transparent and fully opaque.
- Specify the interlacing option only if you are exporting large images.
Don't Combine Image of Different Formats
Whether you are designing or exporting or combining images, endeavor to eschew from combining JPG image that has a continuous tone of colors and GIF image (flat color art and text) in a single image.
In the event of combining the images into a single file and exported as JPG, the colors will be altered and noise will be introduced in the flat color areas, and if the file was exported as a GIF, the continuous tone areas of JPG image will be lost and reduced to a maximum of 256 colors and increase the file size exponentially.
Combine Only By…
Creating two different images, one as background (keep this in JPG) and the foreground as either GIF or PNG.
Doing so allows the transparency of the GIF or PNG in the foreground of the JPG background to show through and the whole result looks like a single image to viewers.