Images

Resize your images to fit the page.

We measure image sizes with Pixels (px) because computer monitors and web pages measure what you are seeing with pixels.

For the most common page layout for the SMC website (two columns, navigation on the left, content on the right), your images don't need to be any larger than 700px wide. Anything larger than that is a waste of storage space on the SMC servers and slows download time for your users.

It's always best to resize your image to fit the size you need it to be on the page.

Common Sizes of Images on the SMC Site.

  • 700 x 350px - the size of images that span the content layout. Common throughout the site at the top of the page.

  • 360 x 240px - the thumbnail size of the news and spotlight images on the home page and detailed pages when you link through to the pages. Note: Although this is a horizontal format, we sometimes post vertically formatted images on the detailed pages. When we do, we try not to exceed 360px wide especially when we position the image to the right or left and have the text flow around the outside of the image.

  • 225 x 150px - another smaller image size that can be used as decoration. 

Image Adjustment

When an image is placed on the page, you will have an "Image" tab in the Ribbon that will allow you to make further changes to your pictures.

SharePoint Ribbon displaying the image editing controls.

  • You can add Alternate Text when you place your images, but if you didn't do it there, you can do it here. Please check the Image Accessibility Guidelines for more information on how to label your image with Alternate Text.

  • Use the "Position" drop-down menu to move an image from the default position to either the right or left of the text surrounding it. (the other choices are not as useful)

  • You can resize your images using the Horizontal and Vertical sizes. Make sure that the "Lock Aspect Ratio" checkbox is "checked" to keep your image in proportion. (Reminder: never increase the size, if you are going to change it, make it smaller.)

  • You do not need Horizontal or Vertical space: make it "0 px." Formatting and spacing will happen when you use the left/right positioning, or if you put your image in a paragraph. 

Tip: If you place your image in a paragraph (click on the image, and choose "Paragraph" in the styles) it will adjust its size based on the device you are using.

Documents

Choose file types that your audience can open and read. 

PDF files should automatically open in a new browser tab, but Word Documents, Powerpoint files, etc. require software that your users need to be able to read them.

The Accessibility of different file types should also be taken into account. Please check the Accessibility Guidelines for the Different Applications to make sure your downloadable files are properly formatted.

Naming Your Files

Please avoid spaces when naming your images and documents. Spaces in file names need to be interpreted by the browser and SharePoint, and they can usually figure things out. They do it by inserting code where it sees a space. (%20) This works but can cause problems if you need to send or copy a link, using it in other locations may not work. Use dashes, underscores, or run the words together:

  • Bad: Image Name.pdf
  • Preferred: Image-Name.pdf
  • Good: Image_Name.pdf
  • Good: ImageName.pdf

(This applies to all file types: document or image.)

Please avoid special characters in your file names. That includes commas, periods, colons and Semicolons, apostrophes (even if it's bad grammar or form), etc. Again, SharePoint is probably smart enough to figure it out, but best to keep it simple.

Capital or lower case letters should not matter.

Replacing Older Files

Tip: If you are updating a file, or files, regularly, use the same name for the file that is already in place on the website. Avoid adding dates or version numbers to identify your documents. Do that on your own computer, or within the file itself.

If you have an updated file, simply replace the old one with a new one with the exact same name, and the file will automatically be updated throughout the entire website. This lets you avoid having to change the links on the page, or pages if there are links to the file on different pages. (Consider that some pages may include a link to your document that you don't control, and can't edit.)