Understanding Web Images

Web Image File Types

Choosing the best type of web images depends on both the final size and quality of your image. There are three primary types of images used for the web:GIF, JPG, and PNG. GIF files are generally only used for vector files as the number of colors and clarity of output are low. GIF files also allow for a transparent background and are a great option for saving logos. When working with raster images you will need to save JPG or PNG files. JPG files do not allow for transparent backgrounds, but work really well with photographic images because they

Photographic or Raster Graphics

Raster images work best as a JPG or PNG file. As you can see in the middle example below, the GIF file tends to have really jagged edges and is not as crisp as the others. With that file type eliminated, there are two main factors in choosing between JPG and PNG: file size and background transparency. JPG files do not allow for transparency. The background must be a solid color. When you are working with photographs this may not be a problem, but if your image needs to appear cut out transparency will be important. PNG files do allow for transparency, and unlike GIF files their edges are much smoother as you can see below. They also do not lose any quality from their original state. While this means that your images will be very crisp, it also means that the file sizes are much larger than their JPG counterparts which allow you to choose how much of your original quality to retain. You can see below that the JPG and PNG share the same quality of resolution but the PNG file is more than twice as large as its JPG counterpart.

JPG – 15KB

  • Smaller file sizes
  • No transparent backgrounds
  • May lose quality

GIF – 15KB

  • Smallest file sizes
  • Transparent backgrounds
  • Quality lost around edges

PNG – 31KB

  • Larger file sizes
  • Transparent backgrounds
  • No quality loss
bunny jpg bunny gif bunny png

Line Drawing or Vector Graphics

The most common use of vector images on the web is through the display of logos or icons. Because the scope of vectors is typically smaller it is easier to decide which file type is the best. JPG files do not allow for a transparent background, which is necessary for icons and a good practice for logos. Both the GIF and PNG share qualities that make them good choices, but differ in the size files that are created. PNG files do not lose any pixels from the original artwork and the file sizes are typically much larger than a GIF.

JPG – 22KB

  • No transparent backgrounds

GIF – 8KB

  • Transparent backgrounds
  • Slight quality lost around edges
  • File sizes much smaller

PNG – 14KB

  • Transparent backgrounds
  • No quality loss
  • File sizes larger
logo jpg logo gif logo png

Quick Summary

There are no hard and fast rules about which file type you need to use for an image. That being said, there are some general rules you can use. If the image a vector file, and particularly a logo you should use a transparent background, i.e. GIF or PNG, to make the image more usable on different backgrounds and in different locations. That way you only need one file and you can reuse it throughout a website. If your image is photographic you need to choose between PNG and JPG. The deciding factor should always be the best balance of quality and file size. You can play around in achieving that balance with Adobe’s Save for Web feature.

Adobe Save for Web

To help make it easier to create web graphics Adobe has incorporated a Save for Web feature into each of their applications. The built-in tool makes it very easy to try out different settings before you save your image. Watch the following tutorial that shows you how to use Save for Web.

If you have trouble viewing the video here, please click to view on YouTube.

Image Maps

Image maps are used to take one image and place multiple “hot spots” on it that can be clicked with an attached action. The image below, for example, has three different shapes drawn within it and each one is intended to be a click-able area that takes you to another page. An image map is used to plot out the three click-able areas and associate the link pages with those areas.
veggies

rectangle circle star

If you would like to learn how to make an image map in Dreamweaver there is a great tutorial on the topic.

If you have trouble viewing the video here, please click to view on YouTube.