Insert/Edit Image

insert edit image Allows you to insert an image on the page. Learn more about photo usage.

Edit Image Before Uploading

All edits, including cropping, should be done before inserting your image on the page. Aviary (by Adobe) is an easy-to-use, free online photo editor.

Upload/Add an Image

Position the cursor at the beginning of the text/paragraph where the image should be placed.

Click the Insert/Edit Image icon on the toolbar.

insert edit image 

Click the Browse button next to the Image URL field.

browse

Click the first Upload button.

first upload link

Click the Choose File button to browse to your image file and click Open.

Click the second Upload button to upload it to the web server.

second upload link

With the file highlighted in the file browser, click the Insert File button. The Image URL field will be populated with the appropriate image path.

insert link

Image Description

Enter brief text to summarize your image in the Image Description field.

image description field

NOTE: In order to comply with ADA laws, it is important that any images containing text or links also include Image Descriptions. This text ensures that any information displayed in the image can also be read by screen readers.

Alignment, Dimensions, Border, Vertical Space, Horizontal Space

The Alignment, Dimensions, Border, Vertical Space and Horizontal Space fields are deprecated and should NOT be used. Always resize your images to the size you want them to display on the page PRIOR to uploading them to the site.

Insert

Click the Insert button to place the image in the body field.

Align Image

To align your image, make sure the image is selected and choose Image Right Border or Image Left Border from the Styles menu 

styles menu

Be sure to align images using the Styles menu on the toolbar; DO NOT use the alignment menu within the Image Properties box, as this has been deprecated.

Resizing

When you are adding images to your web pages, it is important that you use a photo editing program (like Adobe Photoshop or Aviary) to resize the image to the dimensions you want it to display at BEFORE you upload the image to your site for placement. The image properties width and height settings should NEVER be used to resize an image on a web page.

Uploading a large image (i.e. 1200 pixels wide) and then forcing it to resize using the Image Properties settings for width and/or height to display the image smaller (i.e. 200 pixels wide) causes two main issues:

  • The image quality will suffer, causing a blurry, pixelated or distorted looking image.
  • The page load time will be affected; since the image has not actually been resized, the web page still has to load the larger image.