whats the best way to have a web page with user picture (fast and consistent size)

I have a asp.net-mvc website with a SQL server backend (using nhibernate for OR mapping).

Users have to login and I want to allow users to associate a picture with themselves so I can show the picture along side the persons name in a few places (kind of like what facebook does)

I want to avoid storing the pictures in the database directly as i thought that would be slow to download. So i basically have a 开发者_StackOverflow社区field in the "User" table called PictureURL which is just a string. People can simply include any url to an image and i will just user hrefs in the place when i want to show the pictures.

The are my 2 issues:

1. People have been linking different size images so the UI looks a little off.

2. People have been linking a number of different formats (png, jpg, etc).

I am trying to optimize for speed and consistent size of picture. are there any suggestions on what i should do for each of these challenges?

How do i enforce that people link to an image the same size? Should i enforce a certain image format? Right now i am using css to resize the images but i have been told that resizing on the fly is an expensive and slow operation. should i enforce only one image type. I thought png would be faster than jpg so i tried to convert the jpg to png but the size of the files actually grew to 6x the jpg image size. I thought of having a script take all the images and resize them offline and then link to the new picture but the aspect ratio are all different so i can resize to get the same height OR width but not both.

Any other general suggestions on how i can support this associated picture concept and work around the above issues ?

NOTE: I can't use gravatar as this is blocked but i am happy to support an "outsourced solution"

When you say you allow them to provide a URL for an image, do you use this URL directly in your output, or do you download the image to your server, and serve up a local copy? A CSS resize is expencive for the client, not for your server, since the server doesnt do any transform on the data, but the client needs to download the full size image, and then resize it.

I think a good overall solution here for you, would be to download every image to the local server, run it through some software that will resize it down to X, and serve up this local image. This can be batched to run at a time when the load is low on your system. It also gives you exact control of what images can/cant be displayed if that was ever an issue.

For the dimensions issue, I would suggest that you use a two steps process: First you upload the picture and store it in a temporary location. You may here do a resize of the picture keeping the proportions, just to make it fit in the next step. Then, in a second step, you can use JCrop or any other javascript cropping tool and force the user to select a square area of the image. After the user selects the area of the picture, you may create thumbnails of the image with a fixed size and store them wherever you like (db, file system, cloud, etc).

System.Drawing.Image has a GetThumbnailImage method for creating thumbnails after you have loaded an image.

So, basically, the idea is to use a similar approach to the one used by google when you edit your profile photo. Try it if you have a google account.

Regards.

Generally you'll resize the image when it arrives at the server and discard the original. There are solutions which can resize at the client but they add extra requirements to the client, such as Adobe Flash.

A google for ASP.NET and Thumbnail will get you started won't it?

eg: http://dotnetslackers.com/articles/aspnet/Generating-Image-Thumbnails-in-ASP-NET.aspx

I'd recommend Nathanel Jones' Server-side Image Resizing Module for ASP.NET, ASP, & PHP/IIS. It's very easy to use, like

<img src="/Images/12345.jpg?maxWidth=200&maxHeight=200&crop=(0,0,200,200)&format=jpg" alt="" />

It has a performant cache for the created images, so performance should not be a problem. You have to pay 69$ but you get the source code. I hesitated for a long time, but now I don't regret this purchase one second.

Naturally for this to work you need to save the original images on your server.

I would advise against just storing an image URL, then displaying it. Lots of sites frown upon this because you are using their bandwidth to display the image. Lots of sites also don't allow you to do this because of the bandwidth issue, and then you will just get a 404 returned.

Use an image/avatar service like Gravatar.