Web Image Formats

Although graphic designers can convert any file type into a web-friendly format, if you want to learn more about how we decide on the format or if you choose to convert a file yourself for use on the web, here are some guidelines.

The three web file types are GIF, JPEG and PNG, although JPEGs can also be used for print purposes. These formats handle various types of content differently based on the number of colors they allow or how they compress a file, for example. Therefore, using the appropriate format will result in a smaller file size (which translates into faster load time) and the best visual quality possible. Otherwise, you may see a degradation in quality in the form of pixelation, a “halo” effect or lack of color.

The rule of thumb is that JPEGs are best suited for photos, while GIFs work best for solid colors and text. The best uses for PNG files somewhat overlap those of the other two formats. Both GIFs and PNGs also support the use of transparency (lack of a background color), but JPEGs do not. Below is a summary of the best uses for each file type:

gearsFormat photosPhotos & Gradations pencilSolid Colors & Line Art textText transparencyTransparency animationAnimation
GIF x x x x
JPEG or JPG x
PNG x x x x
Format GIF JPEG or JPG PNG
Photos & Gradations x x
Solid Colors & Line Art x x
Text x x
Transparency x x
Animation x

Did you find this post helpful?

Let us know, share or comment!

Leave a Reply