There are lots of different ways to save your images for use on the web. Here’s a look at some of the three most frequently-used file formats (which also are the most compatible with browsers).
gif: Graphics Interchange Format
Pros: Creates very small file sizes, which are viewable in almost every type of browser. Can create animated files (multiple images saved to one file and displayed in sequence). Can have transparent backgrounds with the gif format.
Cons: Not a good choice for photographs, because the gif format reduces all the colors in your photo to the basic 256 (or less), which typically leaves you with a dithered (pixelated or dotty) picture.
Pros: Small file size, offering varying levels of compression. Will show up in almost all browser types. Good choice for photographs (as long as you don’t save the file more than once, or use extreme compression). The jpeg images shown on this page are extreme examples — most of the time, it’s perfect for photos.
Cons: Not a good choice for graphics or line art, because it can create a “watery” distortion on that type of images (see example below). Every time you save an image in jpeg format, some of the data is lost — and because of this, jpg format is called “lossy.” So if you resize a photo, save it as a jpeg, and then go back to edit that picture and save it again as a jpeg, the file will visibly decrease in quality with each save.
Pros: Png files offer a stable, lossless format that’s safe to use while editing your photos. Can create animated files (multiple images saved to one file and displayed in sequence). Can have transparent backgrounds with the png format.
Cons: Larger file sizes, and some old browsers won’t render png images correctly (like the transparency will not display in certain versions of Internet Explorer).
You might see other formats used on the web from time to time — such as tif or bmp — but those are less commonly supported by browsers, and are more likely to trigger a file download than to display an image.
There are lots of different ways to save your images for use on the web. Here’s a look at some of the three most frequently-used file formats (which also are the most compatible with browsers).
gif: Graphics Interchange Format
Pros: Creates very small file sizes, which are viewable in almost every type of browser. Can create animated files (multiple images saved to one file and displayed in sequence). Can have transparent backgrounds with the gif format.
Find out more: Wikipedia
jpeg/jpg: Joint Photographic Experts Group
Pros: Small file size, offering varying levels of compression. Will show up in almost all browser types. Good choice for photographs (as long as you don’t save the file more than once, or use extreme compression). The jpeg images shown on this page are extreme examples — most of the time, it’s perfect for photos.
Cons: Not a good choice for graphics or line art, because it can create a “watery” distortion on that type of images (see example below). Every time you save an image in jpeg format, some of the data is lost — and because of this, jpg format is called “lossy.” So if you resize a photo, save it as a jpeg, and then go back to edit that picture and save it again as a jpeg, the file will visibly decrease in quality with each save.
Find out more: Wikipedia, jpeg.org
png: Portable Network Graphics
Pros: Png files offer a stable, lossless format that’s safe to use while editing your photos. Can create animated files (multiple images saved to one file and displayed in sequence). Can have transparent backgrounds with the png format.
Cons: Larger file sizes, and some old browsers won’t render png images correctly (like the transparency will not display in certain versions of Internet Explorer).
Find out more: Wikipedia, LibPng.org
Other image file types
You might see other formats used on the web from time to time — such as tif or bmp — but those are less commonly supported by browsers, and are more likely to trigger a file download than to display an image.
loading...