Images

Available on
CKEditor 5
Faculty Sites
Sites+

Jump to ...

  1. Adding an image
  2. Alt text
  3. Alignment
  4. Captions
  5. Resizing
  6. Moving an image

Add an image

Place the cursor in the text editor where you want the image to go. Then click the image button in the editor toolbar. Your computer's file browser will open, from which you can choose your image.

Screenshot of the image button in the editor toolbar

You can click an image any time to open the image properties box.

Add image alt text

When you insert an image, an image properties box will prompt you to add alternative text. Alternative text is a brief description of the image which can be read by assistive technology for non-visual users. It is important to add alt text.

If the image is purely decorative, you can mark it that way. Learn more about decorative images.

Screenshot of using the alt text field.

You can edit the alt text (and other image properties) by clicking the image. Click the accessibility symbol (eye with a strikethrough) to access the alt text field.

Screenshot of the image properties box with alt text button highlighted.

Align an image

You have a few options to position the image on the page. Click the image to open the image properties box to choose an alignment option.

Open the image properties to align the image

Image alignment options

Break text

Break text button

Align left and wrap text

Align left button

Align center and break text

Align center button

Align right and wrap text

Align right button

Inline

Inline image button

Caption an image

Add a caption to an image by clicking the image to open image properties and clicking on the caption button. Then edit the caption text.

To remove the caption, uncheck the caption button or delete the text in the caption text.

Editing the caption

Resize an image

To resize the image, click on the image to select it. This will make small blue squares appear in each corner. Click and drag a corner to resize the image. If you click the image after resizing, the image properties box will show the image's width in pixels. You can change this value manually or reset the image to its original size.

Resizing image gif

Tip: It may be easier to resize an image before setting its alignment.

Tip: Resizing an image does not change its file size or resolution. It is best to upload images as close to the size as you'd like it to appear, and use the resize option to fine-tune.

Move an image

To move an image, click the image once to select it. Click and drag. When you begin to drag the image, a small, transparent icon will appear confirming you're moving the image, and a blue cursor will indicate where you're inserting it in the text.

Tip: It can be tricky moving an image that is aligned left or right. Change the image alignment to 'break text' first, move it, then re-align the image left or right as desired.