Throw a pebble into the pond of inspiration...

start a ripple and watch it grow.

Deciphering Image Files: The Basics on JPGs, PNGs and GIFs

 

Over the course of building websites and designing marketing materials, many clients ask about the different file types for photos and images. What are the differences, and which should they use?

 

Size

The first factor to consider is size. Most images, either stock images or from your camera, are fairly large files, which is not ideal for web use. Why? Because the photo will take a long time to load, and online users loathe slow websites.

 

File Types

Images come in different file types, with some more suitable for certain purposes. The most common file types for website photos are JPG, GIF and PNG. Below is a quick explanation of the differences.

 

PNG

The PNG file format is best for line art and text-heavy images. I have found that if the image has text in it, PNG images provide the best quality and readability of the text. This file type also supports transparency, so there will be no white background behind the image if it is placed on a colored background (this is especially helpful with logos). Additionally, PNGs accommodate a wide range of colors.

 

JPG 

The JPG file format works best with photographs. JPGs also remove non-visible colors from images to decrease file sizes, which is a plus. JPGs do not work well for line art, lettering, or logo images because there is not a lot that can be thrown out in the compressing process, so the image loses clarity. One warning when working with JPGs: do not decrease the quality of the file to “low” or you will notice color and quality loss that cannot be returned to the photo.

 

GIF

The GIF file format is an older file format that has become less frequently used since the introduction of PNGs. GIFs reduce the number of colors from thousands to 256, so they can be used for limited-color images, such as logos, graphs, or for images with transparency. Because of the limited colors on a GIF format, however, using it on photos is not advised.

  

When to Use What

While there is no cut-and-dry formula to decide which file format is best for your image, here are some guidelines that should help you decide.

 

Photographs and Full-color Graphics

PNGs and JPGs are both great options for images with a wide color scheme. JPGs are best suited for photographs or images containing photographic elements. PNGs, on the other hand, are better suited for images that include text, charts, screenshots, or detailed illustrations.

  

Non-Photo Images

The deciding factor for graphics that do not contain photos is transparency. For an image that requires transparency, PNG is the best file type. For an image that has few colors and does not require advanced transparency effects, GIF is the best choice. Any file type with transparency should be tested in multiple browsers to make sure the transparency is functioning properly.

  

If you’re still unsure, you can do a test run. Save the image as each of the three different file types and upload them to your website. This will help you determine which file type is best for the image.

 

If you’d like to find out more about downloading images from your camera and storing your images check out this blog post from professional photographer Beth Skogen.

 

Whatever your questions or imaging needs, Waterfront Graphic Design is here to help. Contact us today at amy@waterfrontgraphic.com or 608-592-6501.

 608.669.4677     amy@waterfrontgraphic.com        W10994 Eagle Drive, Lodi, WI 53555

Located 30 minutes north of Madison, WI, on beautiful Lake Wisconsin.

We were honored to be awarded the Small Business of the Year award from the Lodi & Lake Wisconsin Chamber.