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 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.