File Optimization
Choosing a file format for optimization
The objective for file optimization is "the smaller the better." Small files take less time to load and allow browsers to display your page faster. GIF or JPG files are the most common way to save your images for the Web. GIF’s are mostly used for graphic images such as simple or solid color art like text or logos. Photos are best saved as JPEG files. JPEG format supports 24-bit color and preserves a large range of color and variations. JPEG also compresses very well.* GIF or JPG files should range between 2K-20K per image when properly optimized. The larger the dimensions of the file, the more bytes they are. See Graphic Dimensions for details.
 example .gif image |
 example .jpg image |
Do not use any files with extensions such as .TIFF, .RAW, .NEF, .PSD, .PDF, or .PNG.
Photo/Image Preparation: We recommend using a graphics program such as Photoshop to prepare your images before adding them to your web pages. In Photoshop, choose from the menu Image -- > Image Size and then adjust in the width box to the respective sizes of maximum 540 or 755 pixels. Make sure "constrain proportions" is checked. Important: Set DPI to 72. Note: 10 pixels smaller in width is usually safer.
PDF Files: PDF is predominantly used for print output. They ensure a uniform output for print and is why they became a standard format in the print industry. A common problem with peoples' websites are poorly optimized PDF files.
Portable Document Format (PDF) is the file format for presenting device-independent documents on and off the Web. PDFs are an efficient way to accurately describe simple to intricate documents for screen or print output.
Tips for PDF optimization: To create the smallest possible PDFs for the Web minimize the number of fonts, bitmapped images, and substitute vector based-graphics (.GIF) instead. Minimize the number and complexity of forms in your PDF document and flatten form fields. Avoid the use of multimedia. Each additional fully embedded font can easily take 40K in file size. Once you're done making changes to your PDF document use File -> Save As and overwrite your existing PDF file By default, "save as" removes changes that are appended to PDFs by the Save command, linearizes the file for fast web viewing, and removes unused objects.
MS Word: If you must use a Word doc keep it brief and try not to use imbedded images. To reduce download time, you can use the Compress Pictures command on the Picture toolbar to
- Reduce resolution (to 72 dots per inch (dpi) for Web and 200 dpi for print), and unnecessary information is discarded.
- Discard extra information. For example, when a picture has been cropped (crop: To trim vertical or horizontal edges of an object. Pictures are often cropped to focus attention on a particular area.) or resized, the "hidden" parts of the picture are stored in the file.
- Compress the picture, if possible.
HTML Optimization Tips
- Simplify complex tables as they display slower.
- Use CELLPADDING or CELLSPACING for spacing around tables.
- Use colored table cells instead of graphics.
- FONTS/FORMATS - Use the Format list and Font pulldowns only.
- MINIMIZE the size and number of images in your page.
- Use WIDTH and HEIGHT attributes with all images, tables.
- ALT TAGS - must be used to be to meet UMass standards and be ADA compliant but the shorter the better.
- Use SHORT URLs: keep file names as short as possible.
- SET PAGE SIZE LIMITS - The larger the page, the longer it takes to load. We recommend a max of 40K per page. As a reference, the template itself is no more than 3K.
- TEST - have real users try your pages with various platforms and web browsers.
*Please note: JPG compresses file size by selectively discarding data. JPEG compression loses image quality the more times you open and save the image.