GIF, JPG and PNG – What’s the Difference?
When working with digital image files, it is essential to know the differences between each one, so you know when to use or not use them. The main difference between files formats is how they are used. There are other formats used in printing, but these three seemed to be used the most Today. They were created for designing for the web. However, customers tend to want to use them for print files as well. One produces highly optimized simple graphics, another is used for most images, and the third option is used for complex graphics, gradients and transparency.
Gif, jpg and PNG files are mainly used for the web. The difference is the resulting image. Each one has its place for use on websites. Jpeg and png images can also be used in print files as well, although they need to be print resolution. Web images are typically 72 dpi, making them load quickly. However for print, the resolution needs to be closer to 300 dpi.
Gif
Gif images are great for creating very low resolution files for your website. They support transparency, which is great. Transparency allows you to place the gif over any color background or even photos, and you won’t see a border or background in the image. All you will see is the icon. You typically use a gif for simple logos, icons, or symbols. Using a gif for photos is not recommended, because gifs are limited to 256 colors. In some cases you can use even less. The less colors that are in your image, the smaller your file size will be. Gif files also support a feature called interlacing, which preloads the graphic. It starts out blurry and becomes focused and crisp when it is finished downloading. This makes the transition for your viewer easier, and they don’t have to wait as long to see logos or icons on your site. Gifs also support animation. Gif files are also compressed, which gives them a small file size.
You mainly use a gif file format for logos and graphics with solid areas of color. You wouldn’t use a photographic image, or a graphic with gradients. Because of gif files limitations, they are not a good source file for print.
Transparency Dither is a method to disperse pixels, so that a gif can transition into its background easier. This was before PNG, which supports levels of opacity. You can choose to have no dither, Diffusion, Pattern, or Noise Transparency dither. Diffusion spreads out the edge pixels in order to let some of the background sow through. Pattern does the same thing, but uses a repeating pattern around the edges. Noise is straightforward and uses noise around the edges to feather the edge pixels.
Diffusion:
Pattern:
Noise:
Jpeg: Files can be relatively small in size, but they still look crisp and beautiful on your website. Jpegs support up to 16.7 million colors, which makes them the right choice for complex images and photographs. With the wide range of colors, you can have beautiful imagery without a bulky file size. With new responsive techniques, you can also have flexible images without large loading times. There are also progressive jpegs, which preload similar to interlaced gifs. They start out blurry, but come into focus as their information loads. If you are going to use jpegs for print resource the resolution needs to be 300 dpi, not 72 dpi that is used for websites. Jpeg files tend to have a problem with artifacts that can get worse over time and editing. This can make them unsuitable for printing.
PNG
PNG files were developed to build upon the purpose of gifs. Designers need the ability to incorporate low-resolution images that load quickly but also look great, too. This is where PNG comes in. PNG-8 does not support transparency, but PNG-24 and PNG-32 do. PNG transparency is different from Gif transparency, because they can have different levels of transparency. Gifs are either transparent or opaque. Below is a comparison of how a gif will look if the edges of the image are blurred or they are semi transparent:
You will notice that the edges are rough and pixelated. Gifs are best for crisp edged graphics. Below is the same file, but saved as a png-24:
You will notice in the PNG file above that the edges are blurred or feathered, just as we had set it up in our Photoshop file. This will allow for some nice effects for websites and print images.
PNG files are lossless, which means that they do not lose quality during editing. This is unlike jpegs, where they lose quality. PNG files tend to be larger than jpegs, because they contain more information, and are lossless. PNG files do not support animation. For this purpose, a gif should be used for your website. However for printing again the file needs to be at 300 dpi. This seems to be the file format most online printers are requesting because of it’s quality and transparent background capabilities.
I would also like to hear from you about your most pressing issues about artwork. Your question may be used in a future issue of this newsletter. If you have questions, please email me at cora@qdigitizing.com. And please reference this newsletter.
Looking forward to sharing an exciting journey of discovery into the world of Art.
Sincerely,
Cora Kromer
Qdigitizing
cora@qdigitizing.com