There are many different image file types that are available for use. This can often lead to some confusion regarding what is the most appropriate type to use for web publications.
For the purposes of this FAQ, we'll focus on the three predominant image file types used on the web.
The gif file format is the oldest of the three common file types. Originally introduced by CompuServe in the late '80s, this format provided a color image format for CompuServe's file download areas.
The gif file type works very well with solid color graphics. Solid color graphics are commonly used for things such as logos.
The compression used by gif is a lossless LZW compression. This means that the gif image will not degrade, which makes it suitable for archiving and sharing images.
This file type allows for transparency in an image, such as for a transparent background. The ability to utilize transparency, makes the gif format suitable for the generation of small animations and data for video game sprites.
The gif file type does not handle continuous colors well - this includes things like gradient fills for illustrations and complex, blended colors such as in photographs. Elements in photographs and gradient graphics often appear "rippled" or "ringed" with large swaths of single blocky colors.
The jpg file type emerged into popular use in the early 90's. A codec standard, devised by the Joint Photographic Experts Group, the jpg file format is, perhaps, the most widely recognized image format currently in use. This is due to the fact that this file format is used by most digital capture devices.
The jpg file format is best suited for continuous color images such as for photographs or blended color (gradient) images.
The jpg format is popular with digital capture devices because it compresses a file down to a very small bundle, which is better on memory space. This small size also makes jpg attractive for web use because the smaller the file size, the faster an image renders on your screen.
To achieve the tiny compressed size, the jpg compression process actually removes bits of data from your image. This file type is known as a "lossy" file type because of this data loss. Unfortunately, with this type of compression, every time a copy is made it loses more and more data. This is why jpgs sometimes have a splotchy look to them, especially where solid colors meet up. These splotches are known as "jpeg artifacts". This is usually an indication that the file you're looking at is a copy of a copy of a copy, etc.
The jpg file type does not handle solid colors very well. Due to the lossy nature of this file, a fuzziness will most certainly appear where solid color items meet. For example, a black border around a logo with a yellow background will show a distinct smudging where the black meets the yellow.
Additionally, this file type does not allow for any kind of transparency.
The png file type is the most recent of the three common file types, and perhaps the most versatile of the group. The creation of this particular file type started in 1995 by a group of developers who had growing concerns about the patenting of the the LZW data compression algorithm used in the gif format.
The png format uses a lossless ZIP compression, which means that, unlike jpg, it won't degrade. This makes png great for archiving and sharing images.
This format can be used with either solid or continuous color images. So it will work just fine whether your image is a photograph or a logo.
The png format can display transparency for both solid and continuous color images.
This format is a little bit bigger than jpg so it's somewhat slower to read and write, but this particular issue is diminishing more and more as technology increases bandwith and processing capabilities. Additionally, most popular graphics editors also allow for the creation of optimized png files which save a png in a smaller size, suitable for the web.
The biggest drawback with png is that Internet Explorer, especially older versions, do not render png files well, especially ones with transparent backgrounds. This issue was very noticeable in IE6, but has been improved upon in subsequent versions of IE.
Please note that videos which are provided from a source outside of OSU may not completely reflect OSU systems. Instead, use the provided video as a general guide to working with this particular subject.