Technical Training

Working with images

Pictures can provide a way to illustrate a topic as well as add a splash of color to content. However, there are specific conventions that must be addressed when using imaes in a web page.

Please read this important informationIt is important to consider the size of your image before it is used. Keep these concepts in mind:

  • If you insert a large image, the visitor to your page will have to load that image on their device. This could be an issue for the user of a handheld device such as an iPhone or tablet due to the small screen size. It could also impact the visitor's data plan.
  • The width of the content area in your page is limited to roughly 578 pixels. Anything larger than that may be resized, causing an "squished" look. It may also cause the text area to scroll to the left; preventing the user from reading the first few characters on the left side of each row of text in the content area. Take a look at this sample page.
  • Images should be in one of three formats: .png, .jpg, or .gif. For a very thorough discussion of the differences, read this popular Sitepoint article.

What you will do

  • Use the Manage Files area to upload and organize images 
  • Learn about the Replace File method
  • Insert an image into a page using the Add media tool
  • Edit the size and spacing of an image in a page by using the Image Properties panel
  • Learn about the special constraints of images in the CMS

Tutorials

  1. Uploading files to be used in a page
  2. Placing images on a page
  3. Changing the size and spacing of an image (coming soon)