Graphic file size and format are topics that did not interest me when I started using software to create and manipulate images for the web. However, a little bit of experience demonstrated the need for some basic understanding of factors related to the way my images displayed on a computer monitor. The smaller the file size, the faster the image loads in a browser. When I create online training, I want pages to load as fast as possible. Optimizing images for the web is the subject of this blog posting.
Estimated reading time: 8 minutes
File Size
Have you ever left a website because it took too long for images to load? I have, and I don’t want people taking my training to suffer through long download times. That’s why I make graphic file sizes as small as possible—so images load quickly. There are three simple things you can do to minimize the file size.
- Set the image resolution to 72 dpi. Make sure your graphics are at an appropriate resolution for web browsers—72 pixels per inch (ppi). The unit of measure is more commonly referred to as dots per inch (dpi). Standard monitor resolution is 72 or 96 pixels per inch so it is a waste to have your image resolution higher.
- Limit the number of colors. As you might guess, file size has a direct relationship to color depth. (For more information on color depth, read Pixels and Online Training.) Image files with lots of colors, gradients, and subtle transitions are large compared to files with solid and few colors. If you want an image to load quickly and subtle color variations are unimportant, you can limit file size by using the indexed color model (explained in Color Models) where the number of color options are limited to 256.
- Reduce image dimensions. Another thing you can do is reduce the dimensions of your graphic images. You can have a small version of a diagram load initially and provide a link to open a larger version when a user wants to see more details.
Beyond taking these steps to minimize file size, you also need to consider file format.
File Format
When you create or edit images in a graphics application, you have the option to save the file in the application’s native format. Saving a file in the native format preserves all data. In the case of graphic files, saving in the native format preserves layers—an important functional aspect of the file. When you are ready to place the file on a web page, you need to save it in a format that a web browser can recognize. For example, if you want to place an Adobe® Photoshop file on a web page, you need to save the Photoshop file in a format other than Photoshop’s native .psd. Graphic files can be saved in a variety of cross-platform formats.
The letter code after the dot (.) in a file name provides information to a computer about the file format.
| File type | Format code |
|---|---|
| Word | .doc or .docx |
| Spreadsheet | .xls |
| Encapsulated PostScript | .eps |
| Format name | Format code |
|---|---|
| Joint Photographic Experts Group | .jpg |
| Graphics Interchange Format | .gif |
| Portable Network Graphics | .png |
Saving a file as a JPG, GIF, or PNG compresses the original file and reduces the file size, but not the image dimensions. This compression is what we want for faster downloading.
The three graphic file formats used most commonly for the web serve different purposes. Let’s look at the implications of selecting a particular format type.
JPG
JPG (pronounced jay peg) is an appropriate file format for images with gradients, subtle transitions, or many colors (e.g., photographs). When you save an image as a JPG, the graphics application compresses the native file by selectively discarding data. This is known as “lossy” compression, which causes some image quality to be lost. Decrease in image quality is not very noticeable unless you enlarge the image.
When you save an image as a JPG, the application gives you the ability to make adjustments.
“Image Options” specifies image quality, which in turn determines image size.
“Format Options” deal with the way your file is saved and how it loads in a browser. Baseline (“Standard”) is the default option. Baseline Optimized creates a file with optimized color and a smaller file size. Progressive tells a web browser to load the image incrementally.
This JPG image is shown at 200% scale. JPG compression is high quality—12. The file size is 187.2k.
This JPG compression has a lower quality—4.
The file size is 64.2k.
It is difficult to see any difference in image quality compared to the less compressed version above.
JPG format is not appropriate for images made of large areas of solid color.
GIF
GIF (pronounced giff) is an appropriate format for images with sharp edges and large areas of solid color, such as logos and diagrams. It is also appropriate when you want transparency in your file. When you save an image as a GIF, the graphics application uses “lossless” compression, meaning the image does not lose quality. GIF files are restricted to 256 colors, but many GIFs have far fewer colors.
Many GIFs (such as the logo on the left) are created in a vector-based application, such as Adobe® Illustrator.
When an Illustrator file is saved as a GIF, the Color Table displays the colors in your file. You can select one color to be transparent.
The gray and white check boxes in the background indicate the transparent areas.
When a GIF with transparency is placed over a background (such as a yellow gradient), you see the background in the transparent areas.
The limited GIF color palette makes this format inappropriate for photographs.
PNG
PNG (pronounced ping) is a newer and versatile file format for web graphics. The PNG format can be used for either limited color files such as those using an indexed color model with a maximum of 256 colors or the format can be used for full color images with millions of colors. PNG uses a “lossless” compression scheme, meaning no data is lost when the file is saved.
PNG files allow transparency, but unlike GIFs, PNGs have a variety of transparency options and allow up to 256 levels of transparency.
Another benefit of PNG files is built-in gamma correction capability. Gamma correction allows an image to take into account a monitor’s brightness and adjust the PNG image on the monitor to display the image’s intended brightness.
On large files with limited color and sharp edges, PNG compression is greater than GIF. However, GIF compression is greater than PNG on small files.
JPG compression can produce a smaller file of a photograph than PNG compression because the JPG lossy encoding method is more efficient than PNG’s lossless compression.
The PNG file format is not supported on older browsers. In particular, versions of Internet Explorer below 9.0 on Windows systems have many problems that prevent browsers from rendering PNG images correctly.
Wrap up
The format you choose for a graphic file is determined in part by the nature of the graphic and in part by what you want to achieve. File size and color richness are the two major considerations.
This article provides a brief overview about preparing graphics for the web.
For additional information, visit the Web Style Guide by Patrick J. Lynch and Sara Horton or read The Non-Designer’s Web Book by Robin Williams and John Tollett.
Related posts:
Looking for more information on web-based training? Linda has developed a series on converting instructor-led training to web-based training called Great Voyages. The slide decks from all five presentations are available for download.
Contact our Learning Developers
Need to discuss developing e-learning? Creating curriculum for classroom training? Auditing and remediating e-learning for accessibility? Our learning developers would be glad to help.