Layout Image

Preparing your pictures for the web, part three

Welcome to part three of this three part series on preparing your pictures for the web. In this post, we’ll go over the different types of picture files you can use on your website, and which ones are best for different situations. The primary considerations are image quality and file size. Of course you want your pictures to look nice, and some file formats will look nicer than others depending on the type of picture. Also, large file sizes can slow down your website and cause impatient visitors to go elsewhere, so you want to be sure you have the smallest file size that still looks good. Again, depending on the type of picture, some formats are better at this than others.

GIFs and JPGs and PNGs, oh my!

GIF is a format that has been around since the early 1980s, and was the image format of choice for the creators of the internet. This is most likely because GIFs generally have very small file sizes. This file type has been around since the beginning of the web, so it is supported by pretty much all browsers. It’s great for logos, diagrams, and similar graphics where the colors are distinct and there are no gradients. Since it can only display 256 colors, it’s not a good choice for photos where there are a lot of colors smoothly fading from one to another.

GIFs can be set to have a transparent background for displaying logos and graphics against a colored background, but this is not ideal and really only works on a white or very light colored background. This is because the transparency effect leaves a small outline around the graphic which tends to give the edges a jagged appearance.

Another interesting feature is that GIFs can be animated. However, this is not something I recommend. Animated GIFs used to be pretty popular in the early days of the web, but have fallen out of favor, probably because they are annoying. The animation loops so it never stops. For examples, check out this page of gif animations. Pretty annoying right? Don’t drive your visitors to distraction and force them to leave your site early.

JPG files are probably the most common of the picture formats used on the web today, and work well for most situations. Unlike GIF, this format can use up to 16.8 million colors, making for much smoother transitions. JPG is the best choice for photos because it is good at showing the subtle color variations and gradients found in them without making the file size too large. In fact, when you download your pictures from your camera to your computer, often you’ll find that they are already in the JPG format. This file type has been around for a long time and is well supported by all browsers.

PNG is a slightly newer file format created specifically for use on the web. Because of this, is has a lot of great features. It is supported by nearly all browsers now, but a few of the very old browsers may not support it. It was originally created to replace GIF, since the format was patented. The patent expired in 2003, but the PNG remains! The PNG format handles gradients and transparency beautifully, and for this reason, it’s what I prefer to use for graphics that allow the background to show through. However, it’s not the best format for a regular photo since the file sizes are larger.

As a general rule use

  • JPG for photos
  • GIF or PNG for logos and graphics without transparent backgrounds
  • PNG for graphics with transparent backgrounds

I hope this helped to give you a better understanding of what file types to use on your website!