Applies ToSharePoint Server Subscription Edition SharePoint Server 2019 SharePoint in Microsoft 365 Microsoft 365 admin SharePoint admin centre SharePoint operated by 21Vianet

When you add a modern page to a site, you add and customize web parts, which are the building blocks of your page. This article describes how to use the Image web part. Use it to insert an image on the page, either from your site, your computer, or from the web. You can crop, resize, and replace an existing image.

Add an image to your page

Add the image web part

Crop your image

Resize an image

Replace an existing image by dragging or pasting

Add or replace an image on your page

The easiest way to add or replace an image on your page is to simply drag or paste. 

Drag to add a new image or replace an existing image

  1. If you're not in edit mode already, click Edit at the top right of the page.

  2. Do one of the following: To add an image, just drag the image you want to use to the section where you want to place it. To replace an image, select the image you want to replace by double-clicking it, then drag the new image to it.

You may need to resize or re-crop your image as needed.

Replace an image by pasting

  1. If you're not in edit mode already, click Edit at the top right of the page.

  2. Copy the image you want to add or replace the existing image with.

  3. On your page, select the image in the Image web part by double-clicking it.

  4. Press CTRL+V on your keyboard

Add the image web part

  1. If you're not in edit mode already, click Edit at the top right of the page. Find the Toolbox (Toolbox icon in content pane) on the right.

  2. Select See all web parts, then select or drag-and-drop Image from the list of web parts.

  3. Choose a recent image or an image from one of the following:

    • Stock images provided by Microsoft

    • A web search

    • A site

    • Your computer

    • A link

    • If your organization has specified a set of approved images, you'll be able to choose from that set under Your organization.

      Image of file picker options.

      Notes: 

      • Web search uses Bing images that utilize the Creative Common license. You are responsible for reviewing licensing for an image before you insert it on your page.

      • If you're a SharePoint Admin and want to learn how to create an asset library for Your organization, see Create an organization assets library.

      • If you're a SharePoint admin, we recommend enabling a Content Delivery Network (CDN) to improve performance for getting images. Learn more about CDNs.

  4. Click Open or Add image (depending on where your image is coming from).

  5. Optionally, type a caption under the image in the web part.

  6. Click Edit properties (Icon for editing web part and section properties) on the top left of the web part to change the image, add a link to the image, add text over the image, and to add or change alternative text (for people who use screen readers).

    Image web part toolbox

    Automatic alternative text When you insert an image, alternative text (for people with screen readers) is automatically generated. In many cases, the text is automatically saved with your image, unless you change or remove it. In cases where the confidence level of the alternative text for the image is not high, you'll see an alert on the image that allows you to review and change or keep the alternative text.

    Image with alternative text prompt

Note:  SharePoint Server Subscription Edition and SharePoint Server 2019 only support alternative text when you're editing the web part.

Crop your image

You can crop an image without or without using pre-set aspect ratios.

  1. If you're not in edit mode already, click Edit at the top right of the page.

  2. Click the image you want to change. The toolbar for editing images will be displayed.

    Image toolbar

    • 1. Aspect ratios

    • 2. Crop with free ratio

    • 3. Undo

    • 4. Reset

    • 5. Preview (save)

Crop using aspect ratio

Cropping with aspect ratio allows you to decide the proportion of the width and height of your image. The area outlined in blue in the following image shows a 1:1 (square) aspect ratio selection.

Aspect ratio crop example
  1. Click the Aspect ratios button Aspect ratio crop button.

    An additional toolbar will fly out, with options for different aspect ratios.

    Aspect ratio tools

    Select the aspect ratio you want. 16:9 is the left-most aspect ratio option, followed by 3:2, 4:3, and 1:1. You'll see a preview box to show you how your picture will be cropped. You can move the crop box within your picture to change area that is cropped.

    You can also rotate the crop box so to change how the aspect ratio orientation is displayed by clicking the Rotate crop box button Rotate crop box button.

  2. When you're done, click Save Save.

Crop manually

Free crop example
  1. Click the Crop with free ratio button Crop without aspect ratio button to crop without using aspect ratio. Then drag one of the squares on each side of the image to make your image narrower, wider, taller, or shorter.

  2. When you're done, click Save Save.

Resize an image

While you're in edit mode, you can resize an image by selecting it to show the resize handles, or by selecting the Resize button on the image toolbar. Then drag one of the handles to make the image the size you want.

Resize handles on image

Notes: 

Undo or reset

Use the Undo button Undo crop to undo the last action. Use the Reset button Reset image crop to undo all of the changes you've made at once, returning the image to the state it was in since you last saved.

Replace an existing image by dragging or pasting

If you have an existing image web part on your page, you can replace the image by editing the web part and choosing a different image, or you can drag or copy and paste the new image over the one you want to replace. For pasting, you'll need to use the keyboard shortcut for pasting (CTRL+V). Here are the steps:

Copy and paste

  1. If you're not in edit mode already, click Edit at the top right of the page.

  2. Copy the image you want to replace the existing with.

  3. On your page, select the image in the Image web part by double-clicking it.

  4. Press CTRL+V on your keyboard

Drag and drop

  1. If you're not in edit mode already, click Edit at the top right of the page.

  2. Select the image you want to replace the existing image with.

  3. On your page, select the image in the Image web part by double-clicking it.

  4. Drag the image over the existing image.

Note: You may need to resize or re-crop your image as needed.

See Also

Image Gallery web part

Hero web part

Need more help?

Want more options?

Explore subscription benefits, browse training courses, learn how to secure your device, and more.

Communities help you ask and answer questions, give feedback, and hear from experts with rich knowledge.