Reducing image size (under 200 kb)

Oversized images are often the main reason why pages load slowly. Slow pages can frustrate visitors and have a bad effect on search engine rankings. We need to treat images the right way so that they have small file sizes but still look great.

Choose the right format

Web browsers support 3 major image formats: .jpg, .gif, and .png.

GIF

Use the .gif format for images that have fewer than 256 colors.

• Logos
• Line drawings
• Cartoons

JPG

You'll use the .jpg format for most images (especially photographs.) This format supports various levels of compression. An image with higher compression has a smaller file size but results in a lower quality. Lower compression images are of higher quality but also large file sizes. Try to find a balance between the two.

PNG

The .png format results in larger file sizes than .gif and .jpg. Avoid this format when possible. Use it when you need to make available the highest quality images, such as for print material on gateway pages.

Tile

Tile images are narrower then hero images and have a smaller file size. Tile images are 868 x 650. Good content types for portrait and square images include:

• Main body content
• Row of Images (with 2 - 3 images)
• Featured Image/Video
• Promotion & Sign Up Promotion
• Article (Hidden)
• Projects

Thumbnail

The thumbnail is a square aspect ratio. It is 200 wide at a minimum. Use this variant for:

• Multicolumn Content (3 - 4 columns, height may vary)
• Page header and summary with profile picture (200x200)

Hero

The hero image is a widescreen, landscape image. Hero images are 1600 x 800. 

1. Put the cursor in the spot where you'd like to insert the image.

Unfortunately, we cannot align the image on this transition site. So make sure to put your cursor at the beginning or end of a paragraph. You can also put images at the beginning of a subheading. Placing the image into the middle of a sentence will make the page look very bad.

2. Click "Insert" in Main Body menu and select "Insert file link or image" from the dropdown.

You can also click on the icon in the menu bar to the right. It's the icon that matches the one in the dropdown menu.

3. Click the box next to Categorized (under Media categories).

Clicking on the box with the plus sign "+" in the middle opens up the folder structure. You can also close a folder structure by clicking on the box again now that it has a minus sign "-" inside.

4. Navigate through the Media Library to the Images section.

a. Click the box next to Content Assets.

b. Click the Images folder. This is where all the image files are located in the Media Library.

If the image is already in the media library

5. Click on the Name of the image you want to insert on your page.

TerminalFour lists the image and PDF files to the right. There are a lot of image files, so you need to filter by the file name to find your image. You must click the link on the name of the image you want. Afterwards, you will return to your page editor.

You have successfully inserted your image onto your page where your curser was.

For help finding an image

See Searching the Media Library

If the image is not in the media library

Follow the instructions in the next section: Uploading an image to T4. After you upload the image, resume step 5.

1. Click the green box labeled "+ Add Media" towards the top right of your browser.

You will need to be already be in the correct location of the media library for images.

2. Click and drag your image to the box next to Media file.

Written inside the box is "Drop file here or click to choose." You can also click it inside the box choose from your file directory. When that occurs, a pop-up menu will ask for the image's location in your computer.

3. Give the image a name.

After step 7, look at the box directly below: "Name." A good image name should be descriptive. We want the next person to easily navigate the media library and select their image.

4. Give the image descriptive alternative text.

You enter your image's "alt text" in the next box below: "Description / Alt text." This field is mandatory for our website accessibilities guidelines. The goal here is to accurately describe the image in this box.

When visually-impaired users navigate to a page, they cannot necessarily see all images. This alternative text ("alt text") provides a written alternative to that visual. As a result, it is vital that the image alt text is descriptive of the image for those users. Try to be brief and keep it to one sentence or less.

5. Click the blue "Save Changes" box at the bottom right of the browser.

Your image is now in the media library in the correct folder.

We must include alt text for all images on our website.

Here's why:

• When visually-impaired users navigate to a page, they might not be be able to see all images.
• Alternative text ("alt text") provides a written alternative to that visual. 

How to add alt text in the page editor

Double-click on the image itself. A box titled "Set media attributes" will appear. Add the alt text to the Description field on this box. Click the "OK" box when finished.

Notes:

• The Description field looks like it will only allow you to type a few characters. You can type past the end of the small field that appears.
• Do not include the words "photo of" or "image of" in the description. Use a few simple words to describe the image (e.g., firefighter by a house on fire).

How to add alt text in the media library

1. Click the arrow next to "Content" in the left sidebar menu in T4.

This is on the top left of your browser window (underneath "TERMINALFOUR"). It'll open a sub-menu.

2. Click on "Media Library."

This will bring you to the Media Library section of T4.

3. Click the box next to Categorized (under Media categories).

Clicking on the box with the plus sign "+" in the middle opens up the folder structure. You can also close a folder structure by clicking on the box again now that it has a minus sign "-" inside.

4. Navigate through the Media Library to the PDF section.

a. Click the box next to Content Assets.

b. Click the Images folder. This is where all the PDF files are located in the Media Library.

5. Click on the Name of the image you want to add Alt Text.

TerminalFour lists the image and PDF files to the right. There are a lot image files in this folder, so you will need to scroll down or filter by the image name to find your image.

Once you find your image, you must click the link on the image name. This will bring you to the picture editor page.

6. Give the image descriptive alternative text.

You enter your image's "alt text" in the text box labeled: "Description / Alt text." This field is mandatory for our website accessibilities guidelines. The goal here is to accurately describe the image in this box.

7. Click the blue "Save Changes" box at the bottom right of the browser.

Your image's alt text is now saved in the media library.

We recommend avoiding images that contain text. If an image with text is necessary (i.e., without it, the topic would be less clear to website visitors), we must follow World Wide Web Consortium (W3C) guidelines by also including all text from the image in:

• The text of the page itself (the body copy)
• The alt text for the image

See W3C guidelines for images with text

Make sure you in the page editor in T4. Then click on the image. Lastly, press the delete button on your keyboard.

If that doesn't work, from the editor ribbon, select Tools > Source Code.  Highlight everything from, and including, <figure>... to ... </figure>. Press delete.