Profile picture default size

AS in 开发者_如何学Gofacebook,orkut what should be the profile pic settings height,width etc so that the image is clear and do not have any distortion when viewing it

     <img src="image.gif"  style="height:75px;width:130px;"  />

They should be whatever the natural dimensions of the image are.

To avoid distortion in the thumbnail image you should take the original image, and, using whatever image manipulation program or technique (php, Photoshop...) you have available, resize/crop the image to whatever size you consider appropriate:

1. Original image profilePicture.png, 600 x 500px, convert to:
2. profilePictureThumbnail.png, 200 x 240px

And then use the profilePictureThumbnail.png rather than using the img tag to resize/scale the image.

I'd still suggest using height and width attributes in the img tag, since that allows the browser to lay out the page even if the network, or image-server, is slow to respond with the actual image.

I'd definitely avoid using the browser to resize the image since it still requires the picture to be downloaded (at its full size/resolution), and browser image manipulation is not particularly sensitive (and varies from Firefox to Chrome to IE to Opera...), not to mention that people on mobile internet packages won't thank you for throwing, potentially, multi-megabyte images at them via their mobile tariff.

There isnt a standard size, you should choose what looks the best with your design.

I would recommend avoiding setting a fixed size in the image tag. You should rather resize the image programatically to the desired size.

If distortion is a concern, you can follow this algo:

• Identify the max possible width and height for the image placeholder with reference to your design.
• if the user uploaded pic has height > width, then resize the pic to match the placeholder height and adjust the width to keep the image proportion intact.
• If the user uploaded pic has width > height, resize the pic to match the placeholder width and adjust the height to keep the proportion intact.

This way your image would always fit the placeholder and will not have any distortion.

Try this instead. It should work:

<img src="image.gif"  style="max-height:75px;width:130px;"  />