Image File Types That are Used in Websites
Images are a key component of any website. The old advertising saying that a picture is a thousand words definitely still applies to the digital web world we live in today. Images can tell a story. It sets a tone. It can teach sometimes more than the words on the web page what you are about. Understanding Image File Types gives you more options to tell your story.
Recently, scientists have taken the time to research the attention span of a person today. They found that you have 8 seconds before a person’s mind starts to wander to other topic. 20 years ago, it was 14 seconds. Chances are, if you are reading this that your mind has already moved on to at least 1 – 2 other topics and you had to force yourself back to reading the content, if you are still interested in it.
8 Seconds, That is It.
Not a lot of time for a really awe inspiring, soul filled web experience on your website. When you consider this, Images are a necessity, not an option, to a successful website.
There are two types of image file compressions used with websites: lossless and lossy.
- Lossless compression reduce file size while preserving a perfect copy of the original uncompressed image. Lossless compression generally, but not always, results in larger files than lossy compression. Lossless compression should be used to avoid accumulating stages of re-compression when editing images.
- Lossy compression preserve a representation of the original uncompressed image that may appear to be a perfect copy, but it is not a perfect copy. Often lossy compression is able to achieve smaller file sizes than lossless compression. Most lossy compression algorithms allow for variable compression that trades image quality for file size.
The most common image file formats, for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
- JPEG – short for Joint Photographic Experts Group, – is the most popular among the image formats used on the web. JPEG files are very ‘lossy’, meaning so much information is lost from the original image when you save it in a JPEG file. This is because JPEG discards most of the information to keep the image file size small; which means some degree of quality is also lost. Because it has the smallest file size. Bottom line, Web pages will load faster with smaller JPEG files but the quality will not be as good as other file types.
- TIFF – Tagged Image File Format – is a lossless file type , which is considered the highest quality format for commercial work. Jpegs compression sometimes causes the colors to bleed into each other or leave a shadowy residue when you look close at the image, Tiff does not. What you design with the software is what is saved. This of course then makes the file size much larger. Tiff is also compatible with any operating system, and almost every photo editing software.
- PNG – Portable Network Graphics – format is also a lossless file type, like tiff. The format itself allows for higher bit rate pictures . Therefore, it can preserve background transparency while minimizing jagged edges. PNG is an excellent format for displaying images on the web that require transparent elements. PNG format typically is a much large file size; this means that while PNG is excellent for the web, it should be used sparingly and only when needed for transparency purposes or it can really slow down your page load times and customers will leave because of a slow website.
- GIF – Graphics Interchange Format (GIF) – has the harshest compression making the file size smaller and load times faster. However, gif’s lose the most quality of all the file types and blurs many of the colors together. GIF’s also allow for multiple image sequences. Thus creating animation in the image without requiring all the space that a video does. In general, only use GIF if you need to animate, otherwise avoid it.