Types of Images

Exporting Images from Adobe illustrator

PNG (Portable Network Graphics)

PNG (Portable Network Graphics) is a file format used for lossless image compression. PNG has almost entirely replaced the Graphics Interchange Format (GIF) that was widely used in the past.

Like a GIF, a PNG file is compressed in lossless fashion, meaning all image information is restored when the file is decompressed during viewing. A PNG file is not intended to replace the JPEG format, which is “lossy” but lets the creator make a trade-off between file size and image quality when the image is compressed. Typically, an image in a PNG file can be 10 percent to 30 percent more compressed than in a GIF format.

File format of PNG

The PNG format includes these features:

  • Not only can one color be made transparent, but the degree of transparency, called opacity, can be controlled.
  • Supports image interlacing and develops faster than in interlaced GIF format.
  • Gamma correction allows tuning of the image’s color brightness required by specific display manufacturers.
  • Images can be saved using true color, as well as in the palette and grayscale formats provided by the GIF.
JPEG vs. PNG

JPEG and PNG are the two most commonly used image file formats on the web, but there are differences between them.

JPEG (Joint Photographic Experts Group) was created in 1986. This image format takes up very little storage space and is quick to upload or download. JPEGs can display millions of colors, so they’re perfect for real-life images, such as photographs. They work well on websites and are ideal for posting on social media.

Because JPEG is “lossy,” — which means that when data is compressed, unnecessary (redundant) information is deleted from the file permanently — some quality will be lost or compromised when a file is converted to a JPEG.

JPEG is the default file format for uploading pictures to the web, unless they have text in them, need transparency, are animated or would benefit from color changes, such as logos or icons.

However, JPEGs aren’t good for images that have very few color data, such as interface screenshots and other simple computer-generated graphics.

The main advantage of PNG over JPEG is that the compression is lossless, which means there’s no loss in quality each time a file is opened and saved again. PNG is also good for detailed, high-contrast images. Consequently, PNG is typically the default file format for screenshots because, instead of compressing groups of pixels together, it offers a nearly perfect pixel-for-pixel representation of the screen.

Another key feature of PNG is that it supports transparency. With both grayscale and color and images, pixels in PNG files can be transparent, enabling users to create images that overlay neatly with the content of a website or image.

Uses of PNG

PNG can be used for:

  • Photos with line art, such as drawings, illustrations and comics.
  • Photos or scans of text, such as handwritten letters or newspaper articles.
  • Charts, logos, graphs, architectural plans and blueprints.
  • Anything with text, such as page layouts made in Photoshop or InDesign then saved as images.
Advantages of PNG

The advantages of the PNG format include:

  • Lossless compression — doesn’t lose detail and quality after image compression.
  • Supports a large number of colors — the format is suitable for different types of digital images, including photographs and graphics.
  • Support for transparency — supports compression of digital images with transparent areas.
  • Perfect for editing images – lossless compressions makes it perfect for storing digital images for editing.
  • Sharp edges and solid colors — ideal for images containing texts, line arts and graphics.

The disadvantages of the PNG format include:

  • Bigger file size — compresses digital images at a larger file size.
  • Not ideal for professional-quality print graphics — doesn’t support non-RGB color spaces such as CMYK (cyan, magenta, yellow and black).
  • Doesn’t support embedding EXIF metadata used by most digital cameras.
  • Doesn’t natively support animation, but there are unofficial extensions available.
History of PNG

PNG was developed by an Internet working group headed up by Thomas Boutell that came together in 1994 to begin creating the PNG format. At the time, the GIF format was already well-established. Their goal was to increase color support as well as provide an image format that didn’t need at patent license.

Comparing File Sizes

JPEG (Joint Photographic Experts Group)

1) JPEG (Joint Photographic Experts Group) is an ISO/IEC group of experts that develops and maintains standards for a suite of compression algorithms for computer image files.

2) JPEG (usually pronounced JAY-pehg) is also a term for any graphic image file produced by using a JPEG standard. A JPEG file is created by choosing from a range of compression qualities (actually, from one of a suite of compression algorithms). When you create a JPEG or convert an image from another format to a JPEG, you are asked to specify the quality of image you want. Since the highest quality results in the largest file, you can make a trade-off between image quality and file size. Formally, the JPEG file format is specified in ISO standard 10918. The JPEG scheme includes 29 distinct coding processes although a JPEG implementor may not use them all.

Together with the Graphic Interchange Format (GIF) and Portable Network Graphics (PNG) file formats, the JPEG is one of the image file formats supported on the World Wide Web, usually with the file suffix of “.jpg”. You can create a progressive JPEG that is similar to an interlaced GIF.

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is the description of an image as an application of the Extensible Markup Language (XML). Any program such as a Web browser that recognizes XML can display the image using the information provided in the SVG format. Different from a raster graphicsscalable part of the term emphasizes that vector graphic images can easily be made scalable (whereas an image specified in raster graphics is a fixed-size bitmap). Thus, the SVG format enables the viewing of an image on a computer display of any size and resolution, whether a tiny LCD screen in a cell phone or a large CRT display in a workstation. In addition to ease of size reduction and enlargement, SVG allows text within images to be recognized as such, so that the text can be located by a search engine and easily translated into other languages.

Vector graphics images also have the potential advantage over the standard Web image formats, the GIF and the JPEG, of size. Compared with a bitmap image, an SVG image may be much smaller and arrive more quickly.

GIF and JPG images (and a newer format, the PNG) are expected to continue to predominate. While the bitmaps of these image formats can be resized, dimensional reduction does not necessarily save memory, storage, or bandwidth, and significant enlargement produces irregular edges (“the jaggies”). It is expected, however, that bitmaps are, and will likely continue to be, favored for digital transmission of photographs, especially scenes containing complex objects not readily translatable into the formulas used by vector graphics programs.

Common image file formats online include:

  • JPEG (pronounced JAY-peg) is a graphic image file produced according to a standard from the Joint Photographic Experts Group, an ISO/IEC group of experts that develops and maintains standards for a suite of compression algorithms for computer image files. JPEGs usually have a .jpg file extension.
  • GIF (pronounced JIF by many, including its designer; pronounced GIF with a hard G by many others) stands for Graphics Interchange Format. The GIF uses the 2D raster data type and is encoded in binary.  GIF files ordinarily have the .gif extension.
  • GIF89a is an animated GIF image, formatted according to GIF Version 89a. One of the chief advantage format is the ability to create an animated image that can be played after transmitting to a viewer page that moves – for example, a twirling icon or a banner with a hand that waves or letters that magically get larger. A GIF89a can also be specified for interlaced GIF presentation.
  • PNG (pronounced ping ) is a Portable Network Graphics) is a file format for image compression that was designed to provide a number of improvements over the GIF format. Like a GIF, a PNG file is compressed in lossless fashion (meaning all image information is restored when the file is decompressed during viewing). Files typically have a .png extension.
  • SVG is Scalable Vector Graphics, the description of an image as an application of XML. Any program such as a browser that recognizes XML can display the image using the information provided in the SVG format. Scalability means that the file can be viewed on a computer display of any size and resolution, whether the small screen of a smartphone or a large widescreen display in a PC.  Files usually have .svg extension.