Jaytee's avatar
Level 39

Best size for a image header for a profile

Hey guys,

I'm designing my profile page now and i want a full width header. The height of the header will be 500px;

Now, what size would you recommend the user upload? a 1500x500 or as per the resolution, 1920x500?

The problem i have is scaling the image so that is still has quality and the whole image itself is displayed.

It's kind of hard for me to define what i mean but for example twitter, you upload your header image and it's scaled to fit no matter what.

Any tips on this kind of stuff would be great. Thanks

0 likes
1 reply
jekinney's avatar

Couple ways. First if your using bootstrap class img-responsive is your friend. It will resize the image to stay with in its parent container: column or container etc.

Secondly if you expect a lot of mobile traffic you may want multiple size images for each break point, at least small, as small is the size for most phones in landscape. You can do this with media queries or injecting in the src attribute on load or dynamicly. This is good as the mobile user doesn't have to download the full size image and thus on their phones network causing performance issues.

I personally usually have set sizes and determine if mobile. If so use mobile image if not full image and use CSS to resize accordingly. You can detect with JavaScript which browser the user is using.

Please or to participate in this conversation.