Pin Me

The Best Image Formats for Web Design

written by: Lucinda Watrous•edited by: Michele McDonough•updated: 6/30/2010

Some image formats are better for web design than others. Take a look at this article to learn more about why these formats are better, to determine which one you should use and when.

  • slide 1 of 5

    Why do Image Formats Matter?

    Image formats matter on the web a lot more than most may think. The larger an image file is, the longer it will take to load, and the longer something takes to load on a website, the less likely a visitor is to stay to browse the site. When people don't stay to browse your site, you lose traffic, which translates to lost search engine rankings, which usually translates to lost money. On the other hand, images should be clear enough for visitors to see and use, so quality should not be thrown out the window. The best way to maintain a fast load time while using images is to limit the number of images in use, find an ideal compression (format), and make sure all images have a purpose on the site.

  • slide 2 of 5

    GIF: Graphics Interchange Format

    CompuServe started in this file format in 1987, as a method of displaying images that could be downloaded quickly, even with the slow speeds of a traditional telephone modem. While it only allows for a 256 color palette, it is still a choice many people use today for simple web graphics. It is a lossless format, allowing for no pixels or image data to be lost in compression.

    The GIF format used to be the only format that allows for transparency, until PNG came along as an improvement. For instance, when a logo created for a website is saved in another format, the white background (or whatever color background) goes along with it. If the logo will need to be used on many different pages regardless of background color and element it will need to be transparent. GIF also allows for small animations.

  • slide 3 of 5

    PNG: Portable Network Graphics

    Also named for the organization that created the standard, PNG is a lossless image format. It was created to improve upon the GIF format, also allowing for transparency. Designed specifically for the transfer of images online, there is only support for the RGB color spectrum, rather than CMYK. For those designing for both the web and print, this format is not a good choice.

  • slide 4 of 5

    JPEG: Joint Photographic Experts Group

    Named for the organization that created the standard, JPEG format images are among the most commonly seen images on the web. It is a lossy image format, meaning it will cut pixels away from the image to reduce the file size, though it can be saved at various qualities (the higher the quality, the larger the file size.) This format is most commonly seen with photographs, and may also be seen with a .jpg, .jif, or .jfif file extension.

  • slide 5 of 5

    What about Vector/Raster Formats?

    Other formats, such as bitmap, otherwise known as BMP are not good for the web because they have very large file size.