This section includes information about using the OU Image Editor for uploading and editing images, using the correct image format, as well as best practices for saving images for use on the web.
Preparing Images for the Web
The OU campus provides a Image Editor feature that allows images to be resized, cropped, and rotated directly in the OU Campus framework, however it is still best to start by uploading images that follow web standards. Below are some resources to help with choosing the correct format, compressing, scaling, and cropping images.
Access to the new Image Editor is level dependent. Those who can upload files (Level 6 and above) can use the Image Editor to upload images and edit existing images, but cannot overwrite any existing image with the same file name. Those who can delete files (Level 8 and above) can edit and overwrite any existing image.
Choose the Correct Image Format
There are three image formats used on the web:
- JPG: used for photos, since they support millions of colors.
- GIF: used for simple logos, charts, illustrations and icons with high contrast, GIFs also support transparency.
- PNG: a newer format that is now generally preferred for logos, charts, illustrations, and icons. PNGs support transparency, as well as more complex use of color, gradients, and shading.
JPG and PNG images can be edited and saved using the Image Editor. GIF images can also be edited, but must be saved as JPG or PNG files. Simply changing the extension of any image file during save will properly convert the file to a web-optimized version of the chosen file type. The chart below illustrates the files that can be edited and saved using the Image Editor:
|Original Image Type||Possible Saved Image Types|
|.JPG||.JPG or .JPEG or .PNG|
|.JPEG||.JPG or .JPEG or .PNG|
|.PNG||.JPG or .JPEG or .PNG|
|.GIF||.JPG or .JPEG or .PNG|
Learn more about web image formats in this quick Lynda tutorial:
Keep File Sizes Small
Upload images with a small file size to ensure fast downloads across platforms. If your image is multiple megabytes, always compress it before uploading to OU Campus. Even images with large dimensions should have a file size of 200-300 KB or smaller when properly compressed.
Photoshop has a save for web feature that allows you to easily compress images while still retaining quality, as shown in this Lynda tutorial.
Important tip: When saving for web, always work from a copy of your original high-quality image. Keep the original in case you need it again. Once an image is compressed, the extra data (and image quality) is discarded.
Don't have Photoshop? Other basic photo editing tools will allow you to manually adjust the following settings to make your image web-ready.
Note: Photoshop(Photoshop Elements) is the only Photo Manipulation Software that Web Services supports. There are many other photo editing softwares available to you but they will not be supported by the Web Services team.
- Resolution: set to 72 pixels per inch
- Color profile: set to RGB
- Image dimensions: reduce the dimensions of images that are thousands of pixels wide. For OU campus, images typically do not need to be more than 1,000 pixels wide. Please consult the documentation provide in training and tutorials as well as in the webmaster resources on the Web services site for specific image dimensions.
Important tip: YouTube is a wonderful resource for various tutorials on content creation and image manipulation. If you are stuck, or need more help completing a task try searching for a tutorial on YouTube or searching Google for an answer.
Resizing and Cropping Images
When resizing an image, avoid stretching small images to a larger size, which creates pixelation. Large images can always be scaled down, but small images cannot be made larger without sacrificing image quality.
Need more control over the appearance of your images? Try cropping them before uploading them to OU campus. The Lynda tutorial below shows how to use the crop tool in Photoshop.