Web Wednesday (on Thursday!): Using Graphics on the UST Web
Editors' note: Due to our error, this article was not published in Wednesday's issue.
From Information Resources and Technologies
Best Practices for Designing and Optimizing Graphics for Web Use
Do you want to add photos, graphics and tables to your Web sites? If you are feeling inspired, here are some best practices and important tips for accomplishing this effectively and smoothly.
Saving and optimizing graphics for Web use
1. Altering a file’s size or dimension
The first rule in resizing an image is to never increase the image size by more than 5 to 10 percent. If you increase the size of the image by more than 10 percent it will cause the image to become pixilated: losing its sharpness and making it fuzzy. See the examples below:
Image at 100 percent
size and high quality.
As image is increased
pixilation occurs.
Tip: If you are using Adobe Photoshop, the image resize dialog box is located under Image > Image Size. You can adjust the size by actual units of measurement or by percentages. It is helpful to know the dimensions of the space where the image will be placed in order to insert the image at the exact proportions.
2. File saving
The two standard file types for Web images are JPG and GIF. To create a GIF or JPG, save your graphic in the desired format. Which format should you use? For technical reasons which we won't get into, JPG tends to look better for photographs, while GIF works better for other graphics. The general rule is that photographic images and graphics which use gradations should be saved as a JPG. Graphics that are primarily solid fields of color or have lots of text should be saved as a GIF.
Tip: Keep in mind that both GIF and JPG are compressed formats, designed to be used only for the final output of your creative process. Always create your graphics in the native format of your graphics software (.psd if you use Photoshop, for example), and make the conversion to GIF or JPG the very last step. If you need to edit your graphics later, go back to the original files – don't try to edit a GIF or JPG if you can avoid it. Sometimes you can get away with editing these files, but sometimes they come out looking terrible, especially JPGs.
Tip: If you are using Photoshop you can save images specifically for the Web. Under the File menu select Save for Web. In this dialog box you can compare different ways to save a file with the best quality at the lowest files size.
3. Image resolution
When saving files as GIFs or JPGs, they are often automatically saved at 72 dpi (dots per inch). Be sure to double-check this setting in your graphic program. This helps to reduce files size and is the most appropriate resolution for the Web. Many files may start at 300 dpi or higher so they will be a high enough resolution to be printed, so be sure to change them to 72 dpi as you save them for the Web.
Designing graphics for the UST Web
The two main types of editable graphics on the UST Web site are banner ads and table designs.
Banner ads are images that appear on many top-level pages of a Web site. They are effective at guiding viewers, with one-click, to important pages or Web site sections that may be three-to-four clicks into a Web site. They are great for highlighting specific programs, events or fascinating Web site features.
These ads are designed by Web and Media Services during each Web site redesign. Banner ads need to follow the brand and color themes chosen by the department for its Web site. Generally, additional banner ads are created by Web and Media Services; however, departments can make their own banner ads if they have Photoshop or a similar graphics program. Just remember any new banner ads must conform to the established styles which are unique for each department. Specific details about graphic styles are given during the department's Web site migration meetings.
Table designs
Many Web sites use table to organize and display information in an easily readable format. Table design is used to enhance the look of a simple table and link it to the overall look and feel of the Web site. Remember table designs need to use the same overall color scheme that is used to brand the department’s Web site. Even though table content may have different purposes, the following basic design elements should remain constant.
- To enable the text in the table to “breathe” and not feel crammed together the cell spacing should be set at between three to five pixels for each table.
- For table sections that have five or more rows, it is visually helpful to have a subtle color alternating between every other row.
- In multiple column tables, it is easier to read the content when it is aligned to the left in the cell rather than centered.
Questions
If you have questions about using graphics on the Web or Web site development in general please contact Web and Media Services. If you have questions regarding other technology at UST contact the IRT Tech Desk, (651) 962-6230.
