What is a PNG File?
Design, Internet
PNG or Portable Network Graphics files are bitmap images using lossless compression. They were designed to replace GIF image files but have taken a long time to become commonly used due to a lack of support by the Internet Explorer browser.
These issues have now been resolved and the format is quickly taking the place of GIF files where animation is not required.
This type of image is best used with none photographic images that use sharp lines and blocks of colour. They do not compress as well as JPEGs but neither do they lose any quality in compression.
The best use for PNG files is where an image needs to use transparency. Although an area of a GIF image can be transparent, they can only use up to 256 colours and only one level of transparency, while PNG files can use millions of colours and have varying levels of transparency. For this reason a transparent area of a GIF file will be jagged and pixelated while a PNG file can be smooth or fuzzy in order to blend in seamlessly with its background.
What types of images are used on the web?
Design
Due to the limitations on files sizes used on the web thanks to downloading speeds, images need to be highly compressed to make them as small (in file size) as possible. A raw, uncompressed photo for example can be many megabytes in size, but when converted to a JPEG, be only kilobytes with little noticeable difference to the eye. For this reason only highly compressed image formats are used on the web.
Some image formats are static. Others can be animated. In the case of Flash and Silverlight, they can even have sound and video. The line between and image and movie is somewhat blurred when it comes to rich media formats such as Flash and Silverlight.
There are two types of image used on the web.
The common bitmaps are:
The common vector types are:
- SVG
- Flash
- Silverlight
What is a GIF file?
Design
GIF stands for Graphics Interchange Format.
GIF files or GIFs are an image file format commonly used on the internet. They are bitmap graphics and better suited to images with blocky colour and simple shapes and sharp edges, whereas a JPG bitmap graphic would be better suited photography and subtle shading.
They are also restricted to a palette of only 256 colours but do have other advantages over the JPG alternative which are lossless compression and animation.
When a GIF is compressed it does not lose any quality. This leads to less compression than a JPG can achieve.
In general GIF animations are short and simple due to the large file size but they are still very popular even with modern video alternatives. They do not store any sound data so GIF animations are always silent.
What is a Bitmap Graphic?
Design
Bitmap graphics, or just bitmaps, are image files that are built up using rows upon rows of coloured dots. They are also known as raster graphics.
These dots are called pixels. They are the bits in bitmap.
Common file formats for bitmaps are JPEG, GIF and PNG. These are all bitmaps but use alternative methods for compressing the data.
The alternative to bitmap graphics are vector graphics which use shapes rather than dots to define an image. Using bitmaps you can get a much more realistic image than a vector graphic, with all the shading and colour variations you would get in a photo. The downside however is that the image can’t be resized without losing quality. If you shrink it, it loses dots and loses that data forever. If you enlarge it, it just looks pixilated (each dot becomes a larger square).
When you take a photo using your digital camera, the data is stored in a long row of dots. These are the dots you then see on the screen as an overall image.
What is a Vector Graphic?
Design
A vector graphic is an image type that uses shapes to produce an overall image. Such files are built up using simple, coloured shapes/geometry to create an image.
Since they are based on mathematical formula they can be resized at will without the loss of quality seen with bitmap graphics.
SVG files are vector graphics. Flash and also Silverlight also use vector graphics.
What is an SVG file?
Design
Scalable Vector Graphics (SVG) files are a type of vector graphics image file. They use the XML format to define shapes and colours.
As a vector graphic it is a scalable (set to any size) alternative to JPEG, GIF and PNG bitmap formats.
SVG images can be both, static or animated and are seen as an open standard alternative to Flash (Adobe) and Silverlight (Microsoft).
The format has been held back by the web browser Internet Explorer not supporting the file format until version 9.
What is a JPG file?
Design
JPG is the file extension for a JPEG file. JPEG is an acronym for Joint Photographic Experts Group, the name of the committee that created the JPEG standard.
It is an image file used for photographic images. It can be used for any image but the way it compresses file sizes is best suited to images with lots of colour and shape variations and gradations such as a photograph. The opposite would be an image with bold blocks of colour which other file formats are better at handling such as GIF or PNG image files.
The file format uses what is called lossy compression which means that it sacrifices certain details that the human eye has a hard time seeing in order to save on file size.