# Images

## Auto-formatting of image uploads

When an image is uploaded, multiple versions are automatically created and formatted in the different dimensions used by hub components.  

To view all versions of an image, go to **Assets** > find the image > *Edit Asset*. From here, it is possible to [replace an image](#replacing-images). 

It is recommended to upload images as PNGs with a transparent background in the dimensions 1920x1080px. This is the optimal size for an image to be resized, as anything smaller than this may distort images. 

It is not advised to upload images that include text, as the wording can easily become cropped in reformatted versions. Instead, upload text as a separate PNG with transparent background and apply as a layer on top of another image. 

## Image dimensions

The following table defines the image format, dimensions and the components on which it appears. 

<table><thead><tr><th width="160">Format</th><th width="169">Dimensions (px)</th><th>Component</th></tr></thead><tbody><tr><td>Hero</td><td>3200 x 800</td><td>Banner image at the top of events and channels.</td></tr><tr><td>Header</td><td>2000 x 350</td><td>Displayed at the top of an article</td></tr><tr><td>Media</td><td>1280 x 720</td><td>Displayed in carousels when screens are <strong>greater than</strong> 601px (laptops); content listing pages when screens are <strong>greater than</strong> 601px (laptops); and at the top of documents and articles in default layouts.</td></tr><tr><td>Square</td><td>1000 x 1000</td><td>Displayed in carousels when screens are <strong>less than</strong> 601px (mobiles); and content listing pages when screens are <strong>less than</strong> 601px (mobiles).</td></tr><tr><td>Thumb</td><td>640 x 360</td><td>The image displayed in listings. </td></tr><tr><td>Cover</td><td>1920 x 304</td><td>Cover image of a Document </td></tr></tbody></table>

## Replacing images

It is advised that the different versions of an image are checked after upload, to confirm the reformatted versions are as required.&#x20;

1. Go to **Assets** > find the image > *Edit Asset*\
   ![](https://c-assets.papillon.io/image/fetch/s--YnOMApIW--/f_auto/https://dkf1ato8y5dsg.cloudfront.net/uploads/11/156/screenshot-2023-02-08-at-131759.png)
2. The format and dimensions are displayed above each image.\
   ![](https://c-assets.papillon.io/image/fetch/s--YnOMApIW--/f_auto/https://dkf1ato8y5dsg.cloudfront.net/uploads/11/156/image-above.png)
3. To manually replace an image, select ‘Choose file’ and upload your own file. \
   ![](https://c-assets.papillon.io/image/fetch/s--YnOMApIW--/f_auto/https://dkf1ato8y5dsg.cloudfront.net/uploads/11/156/download-at-bottom.png)

Click *Update Asset* to apply the new image to the hub component. <br>