An enterprise question on s:graphicImage

[gus888]

Hi all,

I plan to use s:graphicImage in an enterprise project. I don't know how to save image content source in following two situations:

1) Display a list of small icon images in one page;
2) Click one of them to get a full size image;

Should I save them into two separate image contents (small icon content and full icon content)? Or just save them into one content, then use width=? to display the two situations?

I think if save them into two separate image contents, it will be quicker to retrieve a list of small icon image contents than to retrieve a list of full size image contents from database, but frankly, I don't have any experience on this. I really hope somebody can give me some guidance or advice. I sincerely appreciate it. Thank you very much in advance!

Best regards,

Gus

[raghinii]

I really depends on your read/write ratio and how often a given picture is going to be displayed.

If you have a very large number of images where each image viewed only rarely, even in its thumbnail form, then it might make sense to do it on the fly.

Resizing on the fly every time is something you could test the performance of pretty easily; just throw together a quick page and test it with some images from your class path.

Note that you're going to have to use s:transformImageSize to actually transform server side. If you just set the width and height on the s:graphicImage (i assume it passes these through the same way that h:graphicImage does) then the browser will resize the image and it won't look as nice (esp in IE6).

If the "big" images are a large size, say.. > 5MB you almost certainly don't want to pull in 20 or 50 of those into memory just to resize them and ship them out as thumbnails.


The application i'm working with is a consumer site where we generate the images once and then use them many times... generally about 25-40 per page. Each image is in 2-3 sizes (all of them relatively small... ~20K - 50K .

We pregenerate the images we need use and just use normal h:graphicImage tags which point to a filesystem where the pics are then served by apache.

[gus888]

Hi Raghinii,

Thank you very much for your advice. The project which I plan to do is very similar to web 2.0 picture sharing sites. The picture size may be big or small, depending on user's uploading. At this situation, should I separately save image contents into two database columns (small icon content and full content)? Retrieve small icon content to display thumbnail list (20-30), then retrieve a full icon content to enlarge a full image. Is it right? Thanks again for your help.

[shane.bryzak]

If you want the best performance, I would do as you already mentioned and save both the image thumbnail and the full size image in separate database columns (separate records would be even better).

[pmuir]

Also, if you do use s:graphicImage, then you should use the fileName attribute

<s:graphicImage fileName="icon-#{icon.id}-thumb" />

to allow the browser to cache the image

[gus888]

Hi Shane and Peter,

Thank you sooooo much for your great help. I really want to use Seam to build an enterprise Web 2.0 site to demonstrate the great Seam framework.

save both the image thumbnail and the full size image in separate database columns (separate records would be even better)

Yes, I want to save them into two separate tables, then use OneToOne mapping full size content and lazy fetch.

<s:graphicImage fileName="icon-#{icon.id}-thumb" />

Peter, if I use h:graphicImage, the following code is correct for cache function? Thank you.

<h:graphicImage value="/content/images?id=icon-#{icon.id}-thumb&width=170"/>