Image sizing and scaling in SharePoint modern pages

Image sizing and scaling in SharePoint modern pages

Modern pages and web parts are designed to be fully responsive across devices, meaning that images used in web parts will scale differently depending on where they are shown, which layout is used, and the device on which they are being viewed. For example, modern pages are designed to look great on mobile devices, and automatic image scaling helps create that attractive experience.

Examples of pages across devices

What image sizes work best?

Because of the responsive page design, there is not a specific height or width in pixels that will ensure that an image will maintain a specific shape across devices and layouts. Images are resized and cropped automatically to show the best possible result across a variety of devices and layouts. However, there are some guidelines that can help you make sure your images look great on your pages.

Finding the best image sizes for your page depends on these factors:

  • Aspect ratio: the relationship between height and width of images

  • Column layout: the type and number of columns on your page

  • Web part layout: the layout you choose for the web part in which the image is being used

Aspect ratio

An aspect ratio is the relationship between width and height of images. It is usually expressed as two numbers, such as 3:2, 4:3 or 16:9. The width is always the first number. As an example, a ratio of 16:9 could be 1600 pixels in width by 900 pixels in height. Or, it could be 1920 x 1080, 1280 x 720, or any other width/height combinations that can be calculated to equal 16:9. You can find aspect ratio calculators online and in some photo editing tools to help you determine the aspect ratios of your images. 

Examples of 16:9 and 4:3 aspect ratios.

In most cases, images in modern web parts work best across layouts and devices when they have an aspect ratio of either 16:9 or 4:3, depending on the layout.

Column layouts

A page can be laid out with sections that include different column types and layouts, such as full-width columns, one column, two columns, three columns, one-third left and one-third right columns. A general rule for images expected to fill the width of a column is that they be at least as wide as the column in which they are placed. For example, an image in an image web part in one column should be at least 1204 pixels wide. Following are the width guidelines for each of the column layouts:

Layout

Width in pixels

Full-width column

1920

One column

1204

Two columns

586 per column

Three columns

380 per column

One-third left column

380 for left column; 792 for right column

One-third right column

792 for left column; 380 for right column

Because of the responsive nature of pages, images in full-width columns will always display at full-width of your screen with an automatic height based on screen size.

The height of images placed within other column layouts will depend on your aspect ratio. Here are height/width guidelines for 16:9 and 4:3 aspect ratios (rounded up/down to the nearest pixel). This is helpful to keep your images at a width and height that scales appropriately for mobile devices, for example.

ASPECT RATIO

16 x 9

4 x 3

One column

1204 x 677

1204 x 903

Two columns

586 x 330

586 x 439

Three columns

380 x 214

380 x 285

One-third left column

380 x 446 for left column; 792 x 446 for right column

380 x 594 for left column; 792 x 594 for right column

One-third right column

792 x 446 for left column; 380 x 446 for right column

792 x 594 for left column; 380 x 594 for right column

Web part layouts

The layouts in the web parts you use will also affect how your images scale. The following examples show different web parts and their layouts within one column, and the aspect ratios that are used in each.

Consider this image which has an original aspect ratio of 16:9:

Example of 16_9 image

Following are examples of this image shown in a one column page layout, in different web parts and layouts.

Hero web part

The following aspect ratios for Tiles and Layers layouts are:

  • Tiles: the height of the web part is scaled to follow an aspect ratio of 8:3, and images inside the web part scale to an aspect ratio of 4:3.

  • Layers: An individual layer scales to an aspect ratio of 8:3, and images inside each layer scale to an aspect ratio near 16:9.

  • On mobile devices, a carousel layout is used at 16:9.

Here is an example of an image shown in the Layers layout (top) and Tiles layout (bottom)

Example of Hero web part images in Layers and Tiles layouts

Highlighted content web part

16:9 is the aspect ratio for Carousel, Filmstrip, and Cards layouts.

Here is an example of an image shown in the Filmstrip layout (top) and Cards layout (bottom).

Highlighted Content web part image examples

Image web part

Images will expand to the width of the section containing the web part. You have the option to change the aspect ratio or free-hand crop using the Image toolbar.

Here is an example showing image crop marks (blue lines) at 4:3

Image showing crop marks at 4:3

Image Gallery web part

The following aspect ratios are used in different layouts:

  • Bricks layout respects the aspect ratio of all images shown: 16:9, 1:1, 4:3, and so on. 

  • Tiles, Cards: 4:3

Here is an example of an image shown in the Tiles layout (top) and Bricks layout (bottom)

Example of Tiles and Bricks layouts for Image gallery web part

News web part -

Depending on the layout, images in the News web part can be 4:3, 16:9, or 21:9. Here is an example of images in a top story and a carousel layout.

News layouts image examples

Page title area

Images look best when they are landscape or 16:9 or greater in aspect ratio, and when they are at least 1 MB in size. Also, be sure to set a focal point to the keep the most important part of the picture in view, especially when the picture is used in thumbnails, news layouts, and search results.

Example (original image 16:9) with focal point set on speaker.

Example of a 16:9 image in page title area.

Page thumbnail

Page thumbnails are shown in places like search results, highlighted content results, news posts, and more. By default, the thumbnail comes from the page title area or from the web part that is in the first order on the page (such as top left of a page layout). You can override the default and change the page thumbnail. When you do so, it is best to use an image with a 16:9 aspect ratio.

Example (original image 16:9)

Example of page thumbnail image in Highlighted content web part

Quick Links web part 

The Quick links web part has six different layouts. Here are recommended aspect ratios:

  • Filmstrip, Grid, Button: 16:9

  • Compact, List, Tiles: 1:1, 4:3

Here is an example of an image shown in a Compact layout (top) and a Filmstrip layout (bottom)

Examples of images in Quick Links layouts

Tips: 

Expand your Office skills
Explore training
Get new features first
Join Office Insiders

Was this information helpful?

Thank you for your feedback!

Thank you for your feedback! It sounds like it might be helpful to connect you to one of our Office support agents.

×