Web-image-file-formats-new

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

Compression Methods

Web-image-compression
Web Images Compression Variance

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

Color Mode

WEB-IMAGE-COLOR-MODES
Number of Colors Per Image Format

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.

Image transparency

Transparency

transparent-images
Image Transparency - Foreground & Background Visible

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.

Fuzzy - blurry image

Interlaced-Progressive

This file type mode display graphic at multiple levels of clarity from blurry to clear depending on the connection during the downloading.

file format - jpg, jpeg

JPG

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.

JPEG Characteristics

  • 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 Characteristics

  • 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

Characteristics

  • 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 grayscale8-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. 

50% Off Today!

Creative Logo, Flyers, Business Cards and Catalog for Your Business. We Are Here to Help.
SUBSCRIBE
Hurry up! and subscribe with your email to get your coupon today.
close-link
SEO FRIENDLY WEBSITE EXPERT
Have a Website?
And Need a Redesign
 Let's Talk by Droping Your Email With Us!
SIGN UP
Close
g16framework-media-logoX240X80
STAY HEALTHY,  STAY ALIVE FROM CORONAVIRUS
LIVE COVID-19 UPDATE
close-image

Need A Creative Design?

Sign up with your email address to receive latest design offers
SUBSCRIBE NOW
Customer Satisfaction Guarantee!
close-link
Click Me
error: Content is protected !!