Cache Images vs Static Images

  • Thread starter Thread starter wardemon
  • Start date Start date
W

wardemon

Hi All,
I have a aspx page named: ImageProcess.aspx that creates a thumbnail
version of an image by passing the ImagePath, width, and height. The
ImagePath is taken from a table from a database, while width and
height is user specific - meaning user can change this on demand.

My question is, although this rendering images on the fly is cool, I
would like to implement some sort of mechanism/logic that it wont keep
rendering the thumbnail again and again.

I thought of two things that might solve my problem, however I am
unsure of the pros and cons and which is much faster for the client.

Solution #1: Caching
----------------------------------
using System.Web.Caching;
Cache Cache = context.Cache;

//Get the image
string path = Server.MapPath(Request.FilePath);

//Check the cache
string key = path + "-" + strWidth + "-" strHeight;
if (Cache[key] != null)
{
Image cached = (Image) Cache[key];
cached.Save(Response.OutputStream,ImageFormat.Jpeg);
return;
}
else
{
Image img = Image.FromFile(path);

//Add to the cache
Cache.Add(key, thumb, null, DateTime.Now.AddSeconds(10),
TimeSpan.Zero, CacheItemPriority.High,
new CacheItemRemovedCallback(this.RemovedCallback));
}

this solution checks if a "Cache Key" exists for a particular ImagePath
+Width+Height combo exsits, then it uses the "Saved Cached Image", if
none, it will use the image directly from the Image.FromFile(path) and
adds a new "Cache Key" for it.


Solution #2: Static Images
----------------------------------
1. Create the static image that was generated on the fly by the
ImageProcess.aspx to a directory in the webserver ex: Root
\ThumbnailImages\
2. The static image will be named as ImagePath-ImageName-ImageWidth-
ImageHeight-ImageDateCreated.ImageExtension

Where
ImagePath = Image's Full Path taken from a table.column in a db
ImageName = Image File Name taken from a table column in a db
ImageWidth = Client User specific
ImageHeight = Client User spefici
ImageDateCreated = Image Upload DateTime taken from a table.column in
a db.

3. Subsequent request logic will be:
3.1 First check if the combination filename exists in the Root
\ThumbnailImages\ folder
3.2 If it exist, use that static image
3.2 If it does not exist, create image on the fly using
ImageProcess.aspx & create a thumbnail image in the thumbnail Root
\ThumbnailImages\ folder


I am a bit confuse on which to use. I am after - which is faster ;-)
Lastly, if I use Solution#1: Caching, when the user exists his or her
browser, then opens a new browser, will the "Cache Keys" still be
there? In other words, are the "Cache Keys" stored in the webserver
for use by other concurrent users?

Thanks,
Henry Wu
 
--
HTH,

Kevin Spencer
Microsoft MVP

Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net
Solution 2 is better, as it doesn't rely on memory to cache the images.
However, I have one suggestion: You don't need to keep the date created in
the image file name. That is an attribute of the file.

--
HTH,

Kevin Spencer
Microsoft MVP

Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net

wardemon said:
Hi All,
I have a aspx page named: ImageProcess.aspx that creates a thumbnail
version of an image by passing the ImagePath, width, and height. The
ImagePath is taken from a table from a database, while width and
height is user specific - meaning user can change this on demand.

My question is, although this rendering images on the fly is cool, I
would like to implement some sort of mechanism/logic that it wont keep
rendering the thumbnail again and again.

I thought of two things that might solve my problem, however I am
unsure of the pros and cons and which is much faster for the client.

Solution #1: Caching
----------------------------------
using System.Web.Caching;
Cache Cache = context.Cache;

//Get the image
string path = Server.MapPath(Request.FilePath);

//Check the cache
string key = path + "-" + strWidth + "-" strHeight;
if (Cache[key] != null)
{
Image cached = (Image) Cache[key];
cached.Save(Response.OutputStream,ImageFormat.Jpeg);
return;
}
else
{
Image img = Image.FromFile(path);

//Add to the cache
Cache.Add(key, thumb, null, DateTime.Now.AddSeconds(10),
TimeSpan.Zero, CacheItemPriority.High,
new CacheItemRemovedCallback(this.RemovedCallback));
}

this solution checks if a "Cache Key" exists for a particular ImagePath
+Width+Height combo exsits, then it uses the "Saved Cached Image", if
none, it will use the image directly from the Image.FromFile(path) and
adds a new "Cache Key" for it.


Solution #2: Static Images
----------------------------------
1. Create the static image that was generated on the fly by the
ImageProcess.aspx to a directory in the webserver ex: Root
\ThumbnailImages\
2. The static image will be named as ImagePath-ImageName-ImageWidth-
ImageHeight-ImageDateCreated.ImageExtension

Where
ImagePath = Image's Full Path taken from a table.column in a db
ImageName = Image File Name taken from a table column in a db
ImageWidth = Client User specific
ImageHeight = Client User spefici
ImageDateCreated = Image Upload DateTime taken from a table.column in
a db.

3. Subsequent request logic will be:
3.1 First check if the combination filename exists in the Root
\ThumbnailImages\ folder
3.2 If it exist, use that static image
3.2 If it does not exist, create image on the fly using
ImageProcess.aspx & create a thumbnail image in the thumbnail Root
\ThumbnailImages\ folder


I am a bit confuse on which to use. I am after - which is faster ;-)
Lastly, if I use Solution#1: Caching, when the user exists his or her
browser, then opens a new browser, will the "Cache Keys" still be
there? In other words, are the "Cache Keys" stored in the webserver
for use by other concurrent users?

Thanks,
Henry Wu
Click to expand...
 
Hi Kevin,
Thanks for you reply. I'll do solution 2 then.

Sorry, it's actually ImageDateLastModified and not ImageDateCreated,
making the filename:
ImagePath-ImageName-ImageWidth-ImageHeight-
ImageDateLastModified.ImageExtension

The ImageDateLastModified will be retreived from a table.column in the
DB.
This is needed to handle cases where the user overwrites the image of
the same file name.

Just curious though, would you know if I use Solution#1: Caching,
will the "Cache Keys" objects be stored in the webserver for use by
other concurrent users?
Thus maximizing cached objects?

Thanks,
Henry Wu



--
HTH,

Kevin Spencer
Microsoft MVP

Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:http://www.miradyne.net
Solution 2 is better, as it doesn't rely on memory tocachethe images.
However, I have one suggestion: You don't need to keep the date created in
theimagefile name. That is an attribute of the file.

--
HTH,

Kevin Spencer
Microsoft MVP

Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:http://www.miradyne.net




Hi All,
I have a aspx page named: ImageProcess.aspx that creates a thumbnail
version of animageby passing the ImagePath, width, and height. The
ImagePath is taken from a table from a database, while width and
height is user specific - meaning user can change this on demand.
Click to expand...
My question is, although this rendering images on the fly is cool, I
would like to implement some sort of mechanism/logic that it wont keep
rendering the thumbnail again and again.
Click to expand...
I thought of two things that might solve my problem, however I am
unsure of the pros and cons and which is much faster for the client.
Click to expand...
Solution #1: Caching
Click to expand...
//Get theimage
string path =Server.MapPath(Request.FilePath);
Click to expand...
//Check thecache
string key = path + "-" + strWidth + "-" strHeight;
if (Cache[key] != null)
{
Imagecached = (Image)Cache[key];
cached.Save(Response.OutputStream,ImageFormat.Jpeg);
return;
}
else
{
Imageimg =Image.FromFile(path);
Click to expand...
//Add to thecache
Cache.Add(key, thumb, null, DateTime.Now.AddSeconds(10),
TimeSpan.Zero, CacheItemPriority.High,
new CacheItemRemovedCallback(this.RemovedCallback));
}
Click to expand...
this solution checks if a "CacheKey" exists for a particular ImagePath
+Width+Height combo exsits, then it uses the "Saved CachedImage", if
none, it will use theimagedirectly from theImage.FromFile(path) and
adds a new "CacheKey" for it.
Click to expand...
Solution #2: Static Images
----------------------------------
1. Create the staticimagethat was generated on the fly by the
ImageProcess.aspx to a directory in the webserver ex: Root
\ThumbnailImages\
2. The staticimagewill be named as ImagePath-ImageName-ImageWidth-
ImageHeight-ImageDateCreated.ImageExtension
Click to expand...
Where
ImagePath =Image'sFull Path taken from a table.column in a db
ImageName =ImageFile Name taken from a table column in a db
ImageWidth = Client User specific
ImageHeight = Client User spefici
ImageDateCreated =ImageUpload DateTime taken from a table.column in
a db.
Click to expand...
3. Subsequent request logic will be:
3.1 First check if the combination filename exists in the Root
\ThumbnailImages\ folder
3.2 If it exist, use that staticimage
3.2 If it does not exist, createimageon the fly using
ImageProcess.aspx & create a thumbnailimagein the thumbnail Root
\ThumbnailImages\ folder
Click to expand...
I am a bit confuse on which to use. I am after - which is faster ;-)
Lastly, if I use Solution#1: Caching, when the user exists his or her
browser, then opens a new browser, will the "CacheKeys" still be
there? In other words, are the "CacheKeys" stored in the webserver
for use by other concurrent users?
Click to expand...
Thanks,
Henry Wu- Hide quoted text -
Click to expand...

- Show quoted text -
Click to expand...
 
iis serves up images faster than asp.net can. iis also supports the head
request which the browser will use with images.

-- bruce (sqlwork.com)
Hi All,
I have a aspx page named: ImageProcess.aspx that creates a thumbnail
version of an image by passing the ImagePath, width, and height. The
ImagePath is taken from a table from a database, while width and
height is user specific - meaning user can change this on demand.

My question is, although this rendering images on the fly is cool, I
would like to implement some sort of mechanism/logic that it wont keep
rendering the thumbnail again and again.

I thought of two things that might solve my problem, however I am
unsure of the pros and cons and which is much faster for the client.

Solution #1: Caching
----------------------------------
using System.Web.Caching;
Cache Cache = context.Cache;

//Get the image
string path = Server.MapPath(Request.FilePath);

//Check the cache
string key = path + "-" + strWidth + "-" strHeight;
if (Cache[key] != null)
{
Image cached = (Image) Cache[key];
cached.Save(Response.OutputStream,ImageFormat.Jpeg);
return;
}
else
{
Image img = Image.FromFile(path);

//Add to the cache
Cache.Add(key, thumb, null, DateTime.Now.AddSeconds(10),
TimeSpan.Zero, CacheItemPriority.High,
new CacheItemRemovedCallback(this.RemovedCallback));
}

this solution checks if a "Cache Key" exists for a particular ImagePath
+Width+Height combo exsits, then it uses the "Saved Cached Image", if
none, it will use the image directly from the Image.FromFile(path) and
adds a new "Cache Key" for it.


Solution #2: Static Images
----------------------------------
1. Create the static image that was generated on the fly by the
ImageProcess.aspx to a directory in the webserver ex: Root
\ThumbnailImages\
2. The static image will be named as ImagePath-ImageName-ImageWidth-
ImageHeight-ImageDateCreated.ImageExtension

Where
ImagePath = Image's Full Path taken from a table.column in a db
ImageName = Image File Name taken from a table column in a db
ImageWidth = Client User specific
ImageHeight = Client User spefici
ImageDateCreated = Image Upload DateTime taken from a table.column in
a db.

3. Subsequent request logic will be:
3.1 First check if the combination filename exists in the Root
\ThumbnailImages\ folder
3.2 If it exist, use that static image
3.2 If it does not exist, create image on the fly using
ImageProcess.aspx & create a thumbnail image in the thumbnail Root
\ThumbnailImages\ folder


I am a bit confuse on which to use. I am after - which is faster ;-)
Lastly, if I use Solution#1: Caching, when the user exists his or her
browser, then opens a new browser, will the "Cache Keys" still be
there? In other words, are the "Cache Keys" stored in the webserver
for use by other concurrent users?

Thanks,
Henry Wu
Click to expand...
 
Back
Top