Image Basics

Steps to adding an image:

1. Properly prepare (size and compress image) for display.

2. Upload image to the appropriate folder in the Ektron library.

3. Add it to your html content item (webpage).

Prepare images

Steps:

1. Prepare your image in Photoshop or Gimp - See resources below

2. Crop and size your image. Images should be created at the same size they will display at.

3. Compress your image for web. The file size of your image should be 20kb - 50kb in size.

4. Save your image as jpg, gif, png. No other image formats should be used.

Notes:

• Camera images or images used for print pieces are too large for the website. You must properly resize and compress the image for web to be smaller and allow faster download for users.

• If your image is uploaded above 50kb+, your image will be flagged in the system and scheduled to be resized.

• Images should be given a class of img-responsive so they will automatically resize for any device. This class is added in the 'Inspector'. - See resources below

Add images while editing a page

You can add existing images that have already been uploaded to Ektron during the process of editing or creating your webpages.

Steps:

1. Use the Insert tab on the editor toolbar and insert a library item (book icon).

2. Click the folder you want the image to reside in (your main folder or the _Images folder below it) in the list of folders.

3. Then click the "Add Library" button, browse to the image on your computer that you want to upload and give it a title.

4. When you click the "Add Library" button again, it will add the image both to your page and to your image library.

To add a hyperlink to an image

Steps:

1. Click on the image and open the Inspector.

2. Click the “Add hyperlink to Image” button

3. Add the URL. The image should link to a page on ektron, and external link, or a quicklink.

4. If the link is an external link, you must click the box to 'open the page in a new tab/window'.

To delete an image from your page

1. Click on the image

2. Open the Inspector

3. Click the “Delete Image” button.

Notes:

• If you need to use multiple images, use a consistent in size and position on the page, and make sure images are sized appropriately and are a good quality (not pixelated).

• Poor images make a website look unprofessional.

• If you need help with images, please contact the Marketing and Communications department and we will be happy to assist.