How to insert an image

Inserting images can be very simple and quick. However, there are a number of ways to approach images and a number of ways to upload images into OU Campus. The list below will lead to relevant tutorials that can be helpful in deciding what you need and the best approach for achieving your desired result.

Tips on preparing images

There are many ways of handling images and just as many applications that can be used to do so. The most common edits will likely be to resize or to crop an image. Here are applications and links to instructions to learn how to do just that.

Using Photoshop (available by purchasing for Mac or PC): Watch videos on Adobe TV on how to resize an image or how to crop an image. Note: Photoshop is an advanced photo editing application designed for advanced users. These links are to instructions for CS6. Tutorials are available on Adobe TV for other versions.

Using Paint (available for free for Mac or PC): Read how to resize or crop an image.

Using Preview (available for free for Mac): Read how to resize or crop an image.

Not sure how large images should be?

In general, images should be no larger than 1200 pixels wide, with a file size smaller than 250KB. This is the largest width that will ever be displayed in a browser on In most cases, images should be no larger than 960 pixels wide: this is the screen width of the main column of a default page.

All large images on are processed by the web server to create appropriate sized images to display on whatever device requests them: desktop computers receive large images, mobile phones receive small images. If the server attempts to process an image that is too large, it will time out and send a blank image or return an error response to the browser.

With so many ways to edit, resize, crop and color correct images, it is good to start with a basic understanding of digital images. The most critical feature as it relates to a responsive website like UTC's is size and, more specifically, pixels.

What is a pixel? Glad you asked. According to Webopedia, a pixel (short for Picture Element), is a single point in a graphic image.

So what? Another good question. Basically, each pixel adds physical size to an image, and the pixel dimensions will give you hints as to how the image will display. To help visualize this and to see some recommended image sizes for UTC's pages, check out these examples.


What about captions? Or rows of images?

There are some pre-built snippets for that.