Change the Image's Display Size

While editing your page (by clicking on “Site Actions”, then “Edit Page” on the top left of the window), click on the image you want to resize.

The image will appear highlighted and white squares will show on each corner of the image. Also, a new tab called “Picture Tools” will appear at the top of the window. Clicking on the “Picture Tools” tab will show the different changes you can make on the image currently selected. 

Photo of the photo resize options using the picture tools menu 

There are two different ways to resize images.

  1. Changing the Horizontal/Vertical Size: By changing the numbers (1800 px, 1200 px in the above example) direc​tly, you can make the image the exact size you want it to be.
  2. Clicking and d​ragging the white squares: You can resize the image by dragging the white squares. This way is useful for when you need a of how big the picture looks as you change it
Photo of the manual resolution and aspect ratio options   

​While editi​ng your page (by clicking on “Site Actions”, then “Edit Page” on the top left of the window), click on the image. The image will appear highlighted and white squares will show on each corner of it. A new tab called “Picture Tools” will appear at the top of the window. Clicking on the “Picture Tools” tab will show the different changes you can make on the image currently selected.

F​loat left or right – Your image will likely not align with your text perfectly, as seen below.

Photo showing an image that has no float effectIn order to fix this, select the image. Click on the “Design” tab under “Picture Tools”. Click on the “Position” button, and choose the type of float effect you would like on your picture.

Photo showing the different options for float effects 

In the below example, the image has a “Float Right” effect:

Photo showing an example of an image with a float right effect 

Adding a Border – While in edit mode, click on the picture to select it. Click on the “Design” tab under “Picture Tools”. Click on the “Image Styles” button. There are a variety of borders to choose from in this menu.

Photo showing the options for borders 

Adding and Changing the Alt Text

As mentioned earlier, “alt text” is displayed when the image fails to load or when the user is using tools to help people with disabilities to, in a way, “see” the image. Therefore, make sure that you type something relevant to the image you are displaying. For example, “Image of John Smith giving a speech during the graduation ceremony”.

  1. In order to see what the current “Alt text” for the image is and change it, edit your page (top left of the window, “Site Actions”, “Edit Page”)
  2. Click on the image.
  3. At the top of the window, click on “Design” under “Picture Tools
  4. On the left side, you will see a field called “Alt Text”. Change the alt text to something appropriate and helpful for users that are unable to see the image.

Photo of the alternate text field

​​