image file types, dbuggers

Image File Types That are Used in Websites

Knowing Image File Types is 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 topics. 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. You had to force yourself back to reading the content.

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.

The two types of image file compression’s used with websites:

  • Lossless compression reduces file size while preserving a perfect copy of the original uncompressed image. It 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 preserves 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.

Image File Types and formats.

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. This is because JPEG discards most of the information to keep the image file size small. This means some degree of quality is 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 closely at the image, Tiff does not. This of course then makes the file size much larger. Tiff is also compatible with any operating system, and almost every photo editing software.

Image File Types and formats. (continued)

  • PNG – Portable Network Graphics  – the 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 much large file size. This means that while PNG is excellent for the web. Use it sparingly. 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.

I hope this information is helpful in developing your web presence. If there is anything we can do to assist, please feel free to contact us or get a custom quote

Leave a Comment

Your email address will not be published. Required fields are marked *

Are you ready to start a new project?

Get a free quote from one of our consultants to discuss which option would work best for your needs

Scroll to Top