Preparing Images for Use on Pages

This article and the associated video discuss how to prepare an image for use on an Oregon.gov web page.

Notes

Preparing images is a task that takes place outside of SharePoint and requires no SharePoint permissions to complete.  It does require that some sort of image manipulation software is available locally or online for use.  This article and video reference the Microsoft Picture Manger software but there are others that your IT department may want you to use.  The image manipulation software should include features that enable the user to:

• Crop an image (focus on the subject and remove extraneous content)
• Resize an image (make the native or default size of the image appropriate for the use at hand)
• Compress an image (make the memory footprint small so that it uses less bandwidth to load)

Suggested videos to watch before watching this video

• Build a Page
• Basic Page Edits

Video - Preparing Images for the Web

Suggested Next Videos

• Using Images on a Page

Important Notes About Image Preparation

Always remember to make images earn their way on to the page.

Task Box Images should be in the neighborhood of 25kb (not several MB). Other on page images should be similarly sized for the size of image. Large splash images should be in the 100kb area. Using the process described here or one similar, it's not tough to reduce an image to a very web and mobile friendly size and footprint.

Basic Process

Regardless of the tool used to prepare your images, there are three basic steps to follow:

Crop your image

Think about the central point of the image and crop the image (cut off the edges) to make your focal point obvious. In this process, do think about the overall balance of the image and possibly even the rule of thirds to present a pleasing look.

Size your image

Resize or scale your image to best fit with the other content of the page. Small size adjustments can be made with the image on the page using the images tab of the ribbon, but the image should be pretty close to size when it is uploaded.

Compress your image

Use the compression tools in your software to reduce the memory footprint of the image. Most images can be reduced by 80% or more without any perception of quality degradation. Many can be reduced as much as 95% without loosing quality on the web page.

Still have questions?  

You can:

• Search the Knowledge Base for what you are looking for: 

• You can find more articles in the V4.x Article Index
• You can submit a question to the Oregon E-Government Service Desk