Optimizing performance for image displays.

Question

I am writing a web application that has a page that returns a list of results of objects that each have a profile photo.

I am unsure of how large I expect this page to get, but I want to account for it getting to a larger level. Right now, I am only returning 5-10 objects each with an associated photo, and I am seeing a performance decrease.

I am aware there are many resources on the internet regarding image optimization, and I have done some research, but am still lost as to what I should do to optimize this page.

I know that using css-sprites is an option, but these photos are added by members, so I'm not sure If I could keep up with updating the CSS Sprite.

I am also aware that some image types might be better for performance, but sometimes with a loss of compatibility(although I have read articles that argue against this, and say it is something of the past).

I am fairly new to the concept of needing to optimize images on my page, so if there is a more advanced technique that somebody believes might be over a more novice developers ability, then it might be the wrong thing for me.

Any advice would help. If I try one and am unable to figure out the answer, I can always try another.

I realize this is something that can go on StackOverFlow's sister website regarding web design, but I would like to get the server side of it as well because there may be some fixes I need to make when I am uploading the file, so please no comments on how this is not fit for StackOverflow, Thanks!

Answer 1

Thumbnail them server-side to the EXACT dimensions needed, then convert them to a jpeg. Also, if possible, just use one "default" photo for all of the users then load the individual profile photos via AJAX once the page has loaded.

Answer 2

a good way of optimisng images is using cache, and plus thumbnail them!

if you dont know about caching:

• this is good tutorial to start for webdesigners/ devlopers:Cache Tutorial for web authors`

• this is good tutorial on creating images into thumbnails using php and Gd(which comes default with php) just check incase Create thumbnails using PHP and GD`