How to Format Images for the Web

A photo with realistic colors should use either a JPEG or PNG format.

The three most commonly used image formats for the web are .png, .jpg and .gif. Choosing a format depends on how the image will be used. Choose a .png format if the image needs to maintain a high-quality appearance and loading time is not an issue. Choose a .gif or .png format if the images are flat in color (such as buttons, logos, and graphic texts). To speed load times with photos, choose the .jpg format.

Instructions

Formatting a JPEG

1. Open your image in a graphics program.

2. Decide if you will be formatting the image as a progressive JPEG or a non-progressive JPEG. Progressive JPEGs load quicker because only half the image loads, and then the rest load afterwards. It takes on the appearance of the image appearing initially as low quality, and then appearing in high quality. A non-progressive JPEG doesn't appear on the screen until the entire image has been loaded. If the image is large and needs to load quickly, use a progressive JPEG format.

3. Go to the "File" menu and look for a "Save For Web & Devices" option. A window appears that allows you set decide the image type and compression values. Select JPEG as the type. If you are saving it as a progressive JPEG, make the compression 75 percent or more. If you are saving it as a non-progressive JPEG, set the compression between 1 percent and 50 percent. The more compression used, the smaller the file will be and the quicker it will load. Use the recommended compression values in order to avoid distortion to the image.

4. Save the file, and upload it onto your website.

Formatting a GIF or PNG

1. Open your image in a graphics program.

2. Decide if you will be using a GIF or PNG format. These formats work best for flat images, banners, logos or graphic texts. Decide on a GIF format if you need a fast loading image and quality is not an issue. Decide on PNG if you need a high-quality image that cannot be compressed. Compression occurs when the size of the file is shrunk, but the quality of the image goes down.

3. Go to the "File" menu and look for a "Save For Web & Devices" option. In the window that appears, select the image properties for the image. If you are using the PNG format, select PNG.

4. If you are using the GIF format, decide if you will be using an interlaced or non-interlaced GIF. Interlaced GIF files load faster because half of the image is loaded at a low quality, and then the rest of the image is filled in. A non-interlaced format shows the image all at once, but doesn't load until it's ready. Use an interlaced GIF format when the image is large and has to be loaded quickly.

5. Save your file, and publish it on your website.

References

• WebSiteOptimization; Graphics: Choose the Right Image Format; Andrew King; March 2004
• BuildWebsite4U: Web Graphics Formats
• HTML Source; Image File Formats; Ross Shannon; April 2010
• TechRepublic; How do I... Compress a GIF or a JPEG graphic in Photoshop CS3?; John Lee; October 2007
• Review of Web: When to Choose jpn, png or gif and Differences Between Them? -- Image format Chooser Guide