Use the Image web part

Applies to: SharePoint Online Office for business SharePoint Server 2019, SharePoint Online admin center SharePoint Online operated by 21Vianet.

Once you add a modern page to a site, you insert and customise web parts, which are the starting points of your page. This article outlines 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.

Add an image to your page

  1. If you’re not in edit mode already, select Edit at the top right of the page.
  1. Hover your mouse atop or under an existing web part or under the title region, press Circled plus sign used to add a modern web part to a page , and then choose the Image web part.
  1. Pick a recent image or get an image from a web search, your site, your computer, or a link. If your organisation has definitive range of approved images, you’ll be able to select from that set under Your organisation. 

Image of file picker options.

Notes: 

  • Web search uses Bing images that utilise the Creative Common licence. You are responsible for reviewing licencing for an image before you insert it on your page.
  1. Press Open or Add image (depending on where your image is coming from).
  1. Optionally, write a caption under the image in the web part.
  1. Choose Edit web part Web part edit button (on the left) to edit 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:

After you insert an image, alternative text (for people with screen readers) is automatically generated. In many cases, the text is instantly saved with your image, unless you change or remove it. In cases where the confidence level of the alternative text for the image is minimal high, you’ll observe an alert on the image that prioritises your attention to review and update or maintain the alternative text.

Image with alternative text prompt

Crop your image

You can crop an image without or without employing established aspect ratios.

  1. If you’re not in edit mode already, press Edit at the top right of the page.
  1. Pick your particular image you want to edit. The toolbar for editing images will be presented.

Image toolbar

  1. Aspect ratios
  1. Crop with free ratio
  1. Undo
  1. Reset
  1. Preview (save)

Crop using aspect ratio

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

Aspect ratio crop example
  1. Select the Aspect ratios button Aspect ratio crop button .An extra toolbar will glide out, with options for various aspect ratios.

Aspect ratio tools

Pick your desired aspect ratio. 16:9 is the left-most aspect ratio option, followed by 3:2, 4:3, and 1:1. You’ll notice a preview box to indicate how your picture will be cropped. You can move the crop box within your picture to alter area that is cropped. You can even rotate the crop box in a way to adapt how the aspect ratio orientation is presented by selecting the Rotate crop box button Rotate crop box button .

  1. When you’re done, click Save Save .

Crop manually

Free crop example
  1. Select the Crop with free ratio button Crop without aspect ratio button to crop excluding using aspect ratio. Then drag one of the squares on every side of the image to make your image narrower, wider, taller, or shorter.
  1. Once you’re done, click Save Save .

Resize an image

Whilst you’re in edit mode, you can resize an image by clicking it to display how the resize handles, or by picking the Resize button on the image toolbar. Then drag one of the handles to become your preferred image size.

Resize handles on image

Undo or reset

Use the Undo button Undo crop to undo the last action. Select the Reset button Reset image crop to undo every change you’ve made simultaneously, reverting the image to its previous state it was in since you last saved.

Tip: For more information about images and aspect ratios, see Image sizing and scaling in SharePoint modern pages.

See Also

Image Gallery web part

Hero web part

Leave a Reply

%d bloggers like this: