In this video we examine two image file formats used around the web for displaying images. The JPG and PNG format are the most used types and are demonstrated in the video above.
(GIF files are an option but these are less used for static images and more for animation.)
JPG Images
JPG (also known as JPEG) is an acronym for Joint Photographic Experts Group and has been around since 1992. This bitmap file supports varying degrees of compression quality and is a standard format for digital imaging.
However, where website graphics are concerned, there is another option which may serve you better and actually save you time in more ways than one.
PNG Images
PNG stands for Portable Network Graphics and is another bitmap based image format. This format has been hanging around since 1994 and has undergone several revisions.
It is superior (and more flexible) compared to a JPG. Besides supporting transparency (similar to GIF and TIFF) PNG supports an interlaced loading style and higher compression.
You can compress your PNG images heavily using www.tinypng.com and save masses of bandwidth usually attributed to image file size.
Without putting too fine a point in it, when a PNG loads as an interlaced file, the image begins blurry picture and quickly becomes sharper. On the other hand JPG loads in horizontal bars one at a time.
Why Transparency?
PNG images look better on web pages because you can change the background colour of the website containers and the transparent image file simply sits on top undisturbed. You cannot do that with a JPG.
If you have logos or graphics created for you by a designer, always make sure to request them in a format supporting a transparent background. It makes it easier to create your own designs from images that do not have a background attached to it.
You may well want to create other graphics (such as animated web banners) and it is useful having the ability to drop images into design layouts without having to use a lasso tool to cut out backgrounds. Cutting out images can cause jagged edges as a result of pixel damage caused to anti aliasing on images.
