Life will be simple if there is only one social media platform on the internet. Unfortunately, there are dozens and each category comes with different parameters that users and designers must follow. That adds a lot of avatar sizes, covers and titles!
To make life a little easier, this article will look at seven of the most commonly used social media platforms and important dimensions to keep in mind when designing profile pages.
Although the Twitter avatar is usually displayed at 75 x 75px on the phone, the desktop version will display them at 200 x 200px. Moreover, the site has a dynamic element that allows users to click on profile pictures and view it at larger sizes.
For this reason, many people like to upload their images at 400 x 400px to suit users who use dynamic functions.
In addition to profile images, Twitter recently renovated the title section of the user profile, allowing users to upload images with the proposed size of 1500px by 500px. As mentioned, the height may be less if needed.
Similar to Twitter, Facebook displays avatars in multiple sizes depending on the device. These sizes range from 128 x 128px on smartphones to 180 x 180px on a computer screen.
As said, images should have at least 180 x 180px to upload. Remember that profile pictures on Facebook can be clicked and viewed just like any other image. Make it big and show some details for those who want it!
Facebook also allows users to upload display cover images at 828 x 315px on computers and 640 x 360px on smartphones. The cover image needs to have at least 399 x 150px, but everything smaller than 851 x 315px in full will display pixels on a larger screen.
The Pinterest profile image must have at least 165 x 165px, with the main image appearing at 32 x 32px. However, images up to 600 x 600px can be uploaded and will be resized automatically. Unlike Twitter and Facebook, there is not much to worry about resizing profile images on platforms. It is still quite small throughout.
Similar to Pintrest, the role of a representative on Tumblr is somewhat minor. They are displayed as small 30 x 30px squares in the main feed. As mentioned, Tumblr requires a minimum image size of 128 x 128px.
Instagram profile images displayed at 110 x 110px on the phone and 152 x 152px on the computer screen, however users are encouraged to upload photos up to 180 x 180px.
LinkedIn requires an avatar of up to 200 x 200px. As mentioned, you can upload photos up to 500 x 500px and consider this option related to dynamic web content. LinkedIn also has banner sizes up to 1000 x 425px.
99designs recommends an avatar of a 500 x 500px square (for a retina screen), which can work well at a minimum display size of 32 x 32px without losing too much detail. We highly encourage to get a professional, high quality photo. This allows customers to instantly connect with you and face your work.
The cover image should be 2480 x 400px, so it looks nice on the Retina screen.) The display size is 1240 x 200px on the screen and the screen is wider; Minimum size 540 x 200px on tablet.
There are many things to keep in mind while designing for different websites regarding image size. This article will serve as a useful resource to save time and research!