Performance on images.

I have a web application which contains loads of images.

when I load from our hosted site, its pretty slow. i can see every image as they were loading. sometimes images do not display until they are used ( e.g. mouseover a certain image panel )

Question is. what is the best practice of handling images to boost performance? currently i just place my images in a folder and use CSS to reference them.

Will it improve performance to use Resource files instead?

thanks!

the only way i can think of is to cache the page, but the first still needs time as physically, people have to download the images no matter what.

Hi,

The way u r doing is common thing and i think its the right way also.
this problem may be becasuse of poor bandwidth. Anyway it will be better to use image will less KB's

thank you for your inputs. one thing more is that I heavily use server controls, which I'm not really sure if it has any effect on performance... taking out the ViewState factor...

I just have one thing to consider, if you are dealing with large images you can create thumbnails out of these images which will decrease its size and increase the loading speed.

Create Thumbnail Images

HC

can you elaborate on what you mean please??

do you mean to use the code your probided in ur blog to create thumbnail images.. and use these images instead?

The code provided will create a thumbnail image from the original image with specified width and height (100 px, 100px) which will decrease its size and make the load process better. for example if you have an image size equals to 6 mb when you create a thumbnail it will be 24 kb or even less.

So what yo u can do is to programatically using the provided code create an thumbnails save them in a folder on your web server and load them instead of using the original images.

HC

hi,

i've read your problem thru. and i think both the above two solutions can solve you problem. you can use output caching in ur page,setting theDuration time a little ralatively longer andLoctaionto be 'Any'. For more information you can refer to:

ms-help://MS.MSDNQTR.v80.en/MS.MSDN.v80/MS.VisualStudio.v80.en/dv_aspnetcon/html/51149563-a347-4b2b-bdc2-57a317e12487.htm

Also you can follow haissam's suggestion to create thumbnail images for the original ones.

Well, i have another suggestion, you can choose to host your images to another web host( if you have got pretty pretty lots of images) which is much more powerful and stronger . This can make your access to the images much faster than now.

Hope my suggestion helps. :)

I appreciate all your responses. thank you very much.! =)

hi,

how do i open this link ? ms-help://MS.MSDNQTR.v80.en/MS.MSDN.v80/MS.VisualStudio.v80.en/dv_aspnetcon/html/51149563-a347-4b2b-bdc2-57a317e12487.htm

The 100 px x 100px.. is that fixed? or just need to set it same with the original height and oeiginal width?

so if you have an image 1000px by 400px... just set it to these values?

another thing, i'm getting "A generic error occurred in GDI+" error when saving the thumbnail. any ideaS?

oh, i assumed that u have an msdn installed on your local computer. i'm sorry. you can still refer to :http://msdn2.microsoft.com/en-us/library/zd1ysf1y(VS.80).aspx

it's the same :)