# Image Sizes

For those who are aesthetic profile gurus, you are probably looking for this page. Over here we have noted the exact dimensions and aspect ratios (if applicable) to all possible image uploading sections on CharSnap. Hope that you find this useful!

<figure><img src="https://4109759949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEwva6JgFuXJcJL38LUDs%2Fuploads%2FPjHnZqXejsumYonwbdKJ%2Ftemp.png?alt=media&#x26;token=0aa3dd9b-c7a5-45b7-be45-a8940d50adc1" alt=""><figcaption><p>Bot creation images</p></figcaption></figure>

Check the image above for reference. From left to right, the following dimensions and aspect ratios for the bot creation images are:\
\
\- Full Picture: 1549x2066 3:4\
\- Profile Picture: 625x625 \[1:1]\
\- Background Splash Art: 16:9\
\- Card (Website Display of Full Picture, explanation below): Kind of 4:5, but not really.

<figure><img src="https://4109759949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEwva6JgFuXJcJL38LUDs%2Fuploads%2FKsgX7rWAyetxava1SvOH%2Ftemp.png?alt=media&#x26;token=bc037b0f-829c-4f70-9687-9989b2695111" alt=""><figcaption><p>Full Picture as a Card</p></figcaption></figure>

The site crops the uploaded portrait to fit their card display. While the original image (Full Picture) shows the character's full body in their profile, the *preview version* crops it from the top and punches in slightly.

For now, there is no cropping tool on the website, so you are going to have the crop your images on your own before uploading them into the system. Please utilize the dimensions and aspect ratios above to your uttermost convenience.

<figure><img src="https://4109759949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEwva6JgFuXJcJL38LUDs%2Fuploads%2F63yK7Ern50AcGrJbZuHw%2Fimage.png?alt=media&#x26;token=6dd7d9f2-82c4-43b2-a1a2-b6c34205d8c2" alt="" width="563"><figcaption><p>Preview of profile images</p></figcaption></figure>

Above this message is a preview of your profile banner, buckets, and attachment photos. You can find this on your own and others' profiles. The dimensions for these displays are:\
\
\- Profile Banner: 1544x353\
\- Bucket + Attachment: 374x210

If you would like a visual comparison between how profile banners / headers would look on desktop versus mobile, it would be best to check out the following images below this text. They are made to show you what displays and parts of your images get trimmed off / shown on your profile display.&#x20;

<figure><img src="https://4109759949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEwva6JgFuXJcJL38LUDs%2Fuploads%2FZy5doryPXWzT8LdVhC7A%2F1920x1280_header_dimensions_general.jpg?alt=media&#x26;token=98a4d0bf-2cf9-4a20-9d71-a4ed35b9f13f" alt="" width="563"><figcaption><p>Credit to ivy_mike</p></figcaption></figure>

The picture ABOVE primarily shows the differences of how much the mobile versus desktop shows depending on your device. Desktops will have a more horizontal/wider display of your profile banner. On the other hand, mobile will have an even a larger width AND length preview of your profile banner.

Now below this text is a general idea of what both mobile and desktop previews are going to look like WITH the UI added on top. The greyed out boxes basically tell you what sections of your profile banner will be concealed / not shown.

<figure><img src="https://4109759949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEwva6JgFuXJcJL38LUDs%2Fuploads%2F3iiCLkDPxzh305lz0YBj%2F1920x1280_header_dimensions_PC.jpg?alt=media&#x26;token=df9d3ca7-3b06-4efe-8528-dbc35fb7ce15" alt="" width="563"><figcaption><p>Profile Desktop Preview - Credit to ivy_mike</p></figcaption></figure>

<figure><img src="https://4109759949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEwva6JgFuXJcJL38LUDs%2Fuploads%2FlIA7tAyl0uMP8Idg90jT%2F1920x1280_header_dimensions_Mobile.jpg?alt=media&#x26;token=eadbffc9-5167-4a62-9b23-e07b205a3ccd" alt="" width="563"><figcaption><p>Profile Mobile Preview - Credit to ivy_mike</p></figcaption></figure>
