> For the complete documentation index, see [llms.txt](https://docs.intranet.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.intranet.ai/sharepoint-intranet/other-configurations/image-dimensions.md).

# Image dimensions

## Site logo and header

### Site logo

Dimensions: **1220 x 305**

<div align="left"><figure><img src="/files/bDuBQTu6zWTUA0s1CjrI" alt=""><figcaption></figcaption></figure></div>

### Extended header

Dimensions: **2560 x 164**

<div align="left"><figure><img src="/files/vtob3Diu4ozZqLBCHTcu" alt=""><figcaption></figcaption></figure></div>

***

## Pages

### Page header

Dimensions: **1920 x 320**

<div align="left"><figure><img src="/files/d6ZMKJo30O5Pvd7vgs0D" alt=""><figcaption></figcaption></figure></div>

***

## News

### **News header**&#x20;

Dimensions: **1920 x 320**

<div align="left"><figure><img src="/files/FluTk5InamhTk8OKFPCv" alt=""><figcaption></figcaption></figure></div>

### **Preview image**

Dimensions: **1920 x 1080 (16:9)**

<div align="left"><figure><img src="/files/SiLE6JelKkyAoDDD1pBu" alt=""><figcaption></figcaption></figure></div>

***

## Web parts

### **Background Section Editor**

Dimensions: **1900 x 545**

<div align="left"><figure><img src="/files/hH7IRauwFnaYUTookvmb" alt=""><figcaption></figcaption></figure></div>

### **Company Apps**

Dimensions: **80 x 80**

![](/files/FkfMOOoAghmoDfJxEGpA)

### **Company News**

The aspect ratio of the image should be **16:9** (**1920 x 1080**) for the picture to be correctly shown in the news archive. However, the IAI News web part is characterized by a layout with multiple squares, which shows only what is inside the green square below (**400 x 400**).

<div align="left"><figure><img src="/files/qOqNXsBWc6bGjgvp1Rej" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/lKPoFyATVlgTRyvlICQu" alt="" width="375"><figcaption></figcaption></figure></div>

### **Event Calendar**

* Dimensions for **event categories**: **55 x 55**

<div align="left"><figure><img src="/files/UKTAyw3jKw5HixVaAS33" alt=""><figcaption></figcaption></figure></div>

* Dimensions for **event pictures** (supported only by the Compact with details layout): **379 x 213**

<figure><img src="/files/9MwvjshHtsalYtBnFYK4" alt=""><figcaption></figcaption></figure>

### Graphic Buttons

* Dimensions for the **small** button: **250 x 250**&#x20;

<div align="left"><figure><img src="/files/Z5H6PTgT59hxS0U9VsVD" alt=""><figcaption></figcaption></figure></div>

* Dimensions for the **medium** button: **250 x 300**

<div align="left"><figure><img src="/files/IlAMFEPC4edP13jLKjIR" alt=""><figcaption></figcaption></figure></div>

* Dimensions for the **large** button: **250 x 400**

<div align="left"><figure><img src="/files/xbtZ0ybxveukPOeZHurn" alt=""><figcaption></figcaption></figure></div>

### Highlights

We suggest using this web part in a 2/3 section and adopting the following dimensions: **1920 x 800**&#x20;

<div align="left"><figure><img src="/files/Bocd7sGEZ6UDmkvixsNa" alt=""><figcaption></figcaption></figure></div>

### **Hover Buttons**

We suggest that you choose a **100 x 100** image but keep some **margins**, as shown in the picture below:&#x20;

<div align="left"><figure><img src="/files/BSES3JU5d2WU8vdh8wNk" alt=""><figcaption></figcaption></figure></div>

### Image slider

This web part is particularly suitable for **rectangular** pictures. For example, the screenshot below features 2740 x 500 pictures:&#x20;

<figure><img src="/files/wkpCggJHeqXg2HAWrAKD" alt=""><figcaption></figcaption></figure>

### **Key Initiatives**

* Dimensions for the **pictures**: **400 x 400**

<div align="left"><figure><img src="/files/MWDIOISJh4MasTit3dga" alt=""><figcaption></figcaption></figure></div>

* Dimensions for the **masks**: create a **400 x 400** image, put the desired **shape** at the center of this area, and save the image as a PNG with transparent background

<div align="left"><figure><img src="/files/Hwew4DD21NF0Ik4KKE8P" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/IthA8lv1XfcfNyJeJtdV" alt=""><figcaption></figcaption></figure>

### Leadership Team

**Dimensions**: 800 x 800

<div align="left"><figure><img src="/files/KUuqSMPmrkcHQFDWZkN9" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
**Please note**: to ensure optimal performance, avoid using images with excessive file sizes. High-resolution images may significantly delay the loading time of the web part.
{% endhint %}

### Locations Map

Dimensions for the **pin icon**: either **50 x 50** or **30 x 50**

<div align="left"><figure><img src="/files/o3Q3un6z1Xn5Q3lIyH5Z" alt=""><figcaption><p>50 x 50 </p></figcaption></figure> <figure><img src="/files/goqAF28HP7TNoyhSuaQm" alt=""><figcaption><p>30x50</p></figcaption></figure></div>

### Mood

If you decide to create a custom icon, it is important that you adopt a **square image**. Good results are obtained with **50 x 50** images.

<div align="left"><figure><img src="/files/KBCN9bWP5wtgyVm34NUk" alt=""><figcaption></figcaption></figure></div>

### My Profile

* Dimensions for the **cover image**: **800 x 300**

<figure><img src="/files/BGd3TuJ2IvTd3zQK7DlL" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Maximum size accepted: **4 MB**
{% endhint %}

* Dimensions for the **tag image**: it is important that tag images are **150x150** in size; otherwise, the tag will not be visible.

<div align="left"><figure><img src="/files/0Afde8ZyuiKJLJY9ZsMm" alt="" width="375"><figcaption></figcaption></figure></div>

### Pop-up

Dimensions: **1160 x 765**

<figure><img src="/files/AX0JN52P9w17Pp3lo2nO" alt=""><figcaption></figcaption></figure>

### **Quick Links**&#x20;

* Dimensions for the **compact**, **tiles**, and **list** layouts: **400 x 400**

![](/files/9S8KGoiyLl8bfBfKFTB4)

* Dimensions for the **grid** and **filmstrip** layouts: **210 x 120**

<div align="left"><figure><img src="/files/1ew3lknwP5ZjGZ2wB4io" alt=""><figcaption></figcaption></figure></div>

### **Quotes**

We suggest creating a **620 x 620** **project** with a **290 x 290 image**. Then, the web part allows you to move the image and zoom in.&#x20;

<div align="left"><figure><img src="/files/pkFgfTkI32GGmr4potmW" alt=""><figcaption></figcaption></figure></div>

#### ![](/files/1LSlvWGht1i5BrfFktyP)

### Videos

* Video Channel **logo**: the aspect ratio of this picture should be **4:3**. We suggest adopting the following dimensions: **1000 x 750**.

<div align="left"><figure><img src="/files/Z91NcK84VtfoXN0s0QbL" alt=""><figcaption></figcaption></figure></div>

* Video **thumbnails**: **1280 x 720** (good results are also obtained with 1920 x 1080 pictures)

{% hint style="info" %}
**N.B. Sharepoint is responsive**. This means that regardless of the dimensions of the screen, the image with the correct dimensions will fit everywhere.
{% endhint %}