Preparing Images for the Web: File Formats: JPG/JPEG vs GIF vs PNG
When saving an image for use on the web, there are three main image formats to choose from:
JPG/JPEG
This format is most useful for photographic images. JPEGs support up to 16.7 million colors. They use lossy compression, which means that each time you save a JPG it loses image quality.
Typically a JPEG will have a “halo” effect around text due to this compression. To avoid this, use a GIF or JPEG instead.
GIF
This format is great for images with large images of the same color. They support up to 256 colors, and they support transparency and animation.
GIF files should be used for logos, line drawings and icons.
PNG
PNG images are the newest of these three image formats. They support 24 bit images, as well as alpha transparency. Unfortunately PNG images can be quite large in file size(400+ KB). Internet Explorer 6 does not support transparent PNGs.
How do I convert between formats?
Adobe Photoshop
We recommend using Adobe Photoshop’s “Save For Web” feature (pictured).
It allows you to preview an image in any of the above formats before saving. You can also fine-tune thing such as number of colors, transparency, etc. It will even show you the resulting file size before you save the image.
Alternatively consult our Web Graphics Tools for Mac and Windows article.
